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 Slider代码：

 <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

我可能错了，但您使用的是NAME OF PERSON CHARGENUMBER CHARGEDESCRIPTION Doe, Jane 001, 002, 003 TEXT, TEXT, TEXT Johnson, John 001, 002 TEXT, TEXT Thompson, Tommy 001 TEXT Williams, Wendy 001, 002 TEXT, TEXT类，表示您已加载Bootstrap。如果是这种情况，您已经可以使用幻灯片了。

您可以在此处阅读幻灯片（轮播）：https://getbootstrap.com/docs/4.0/components/carousel/

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

如何调整幻灯片显示并让人们点击？

1 个答案: