幻灯片挂断

时间:2017-10-02 20:35:08

标签: javascript jquery html

我正在尝试制作幻灯片。我正在关注w3Schools tutorial

我的HTML幻灯片就像这样:

<div class="slide fade">
    <img src="assets/home_slide1.png" style="width:100%">
</div>
<div class="slide fade">
    <img src="assets/home_slide2.png" style="width:100%">
</div>

我在js中的幻灯片放映功能(几乎完全从教程中复制):

var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("slide");//jquery, use $(".slide");
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > slides.length) {slideIndex = 1}
    slides[slideIndex-1].style.display = "block";
    setTimeout(showSlides, 5000); // Change image every 5 seconds
}

它没有显示,根据我的控制台的原因是:

TypeError: slides[(slideIndex - 1)] is undefined

因为在我调试时, var slides 永远不会被填充,所以 slides [0] 是未定义的。在我的故障排除中,为什么会发生这种情况,我错过了什么?

1 个答案:

答案 0 :(得分:0)

原来我的问题是(而且我不认为你可以从我发布的代码中看到这个),我没有在我的document.ready(function {中调用showSlides() })。

我知道这很像TINY,但没有经验足以知道它是什么微不足道的事情。