如何调整幻灯片并允许用户点击

Question

我对Javascript真的很糟糕，而且还在学习。最近，我有了为我正在设计的网站使用图像滑块的想法，我尝试了 W3school 的图像滑块代码。我测试了代码，并在网站上尝试了演示。

在网站上，我可以单击灰色点在图片之间移动，但是，当我将代码粘贴到我的页面上时，我无法通过单击来移动图像(灰色按钮无法单击(，并且图像能够更改的唯一方法是通过自己的动画时间。我不知道它有什么问题，我希望有人能够帮助我并告诉我出了什么问题。

下面是我的Javascript代码：

var slideIndex = 0;
showSlides();
function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > slides.length) {
        slideIndex = 1
    }
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].className += " active";
    setTimeout(showSlides, 5000); // Change image every 2 seconds
}

我的 HTML 滑块代码：

 <div class="jumbotron" style="background:transparent !important;">
    <div class="slideshow-container">
        <div class="mySlides fade">
            <div class="numbertext">1 / 3</div>
            <img src="Images/Bulldog.jpg" style="width:100%;height: 300px">
            <div class="text"><h2>Bulldog</h2></div>
        </div>
        <div class="mySlides fade">
            <div class="numbertext">2 / 3</div>
            <img src="Images/Corgeek.jpg" style="width:100%;height: 300px">
            <div class="text"><h2>Corgi</h2></div>
        </div>
        <div class="mySlides fade">
            <div class="numbertext">3 / 3</div>
            <img src="Images/HairyDog.jpg" style="width:100%;height: 300px;">
            <div class="text"><h2>Furry Dog</h2></div>
        </div>
    </div>
</div>

另外，有没有更好的方法来创建幻灯片？如果有，如果有链接或解决方案供我查看，将不胜感激。谢谢。

Answer 1

我可能是错的，但您使用的是jumbotron类，这表明您已经在加载 Bootstrap。 如果是这种情况，您已经有一个幻灯片可供您使用。

您可以在此处阅读有关幻灯片(轮播(的信息：https://getbootstrap.com/docs/4.0/components/carousel/

它可能比您当前使用的更容易使用，并且更不容易出错。