Question

我正在尝试制作幻灯片。我正在关注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] 是未定义的。在我的故障排除中，为什么会发生这种情况，我错过了什么？

Answer 1

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

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

幻灯片挂断

1 个答案: