我正在尝试制作幻灯片。我正在关注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] 是未定义的。在我的故障排除中,为什么会发生这种情况,我错过了什么?
答案 0 :(得分:0)
原来我的问题是(而且我不认为你可以从我发布的代码中看到这个),我没有在我的document.ready(function {中调用showSlides() })。
我知道这很像TINY,但没有经验足以知道它是什么微不足道的事情。