我正在尝试制作一个移动图片库,图片每 4 秒滚动一次。
我正确地链接到 javascript,我确定。
这是javascript,我想知道它有什么问题。
var slideIndex = 0;
image();
function image() {
alert("Entered Function");
var i;
var x = document.getElementsByClassName("slideshow");
for (i = 0; i < x.length; i++) {
x[i].style.display = none;
alert("Entered Loop");
}
slideIndex++;
if (slideIndex > x.length) {
slideIndex = 1;
}
x[slideIndex-1].style.display = "block";
setTimeout(image, 4000);
}
有什么想法吗?谢谢
编辑:style.display = none 周围缺少引号不是问题。我只是在测试代码后忘记将它们添加回来。
最佳答案
原因是,当脚本执行时,元素不存在。我相信,您正在加载元素之前执行脚本。有两种处理方法:
- 使用
onload
事件监听器。 - 在加载元素后加载脚本。
此外,如果您检查控制台,代码中会出现错误。 = none;
不对。它应该是一个字符串。将行更改为:
x[i].style.display = "none";
此处的一个片段演示了如果您在加载元素后加载脚本,它会起作用。
<div class="slideshow">Slide 1</div>
<div class="slideshow">Slide 2</div>
<div class="slideshow">Slide 3</div>
<div class="slideshow">Slide 4</div>
<div class="slideshow">Slide 5</div>
<script>
var slideIndex = 0;
image();
function image() {
alert("Entered Function");
var i;
var x = document.getElementsByClassName("slideshow");
for (i = 0; i < x.length; i++) {
// Error here:
x[i].style.display = "none";
alert("Entered Loop");
}
slideIndex++;
if (slideIndex > x.length) {
slideIndex = 1;
}
x[slideIndex - 1].style.display = "block";
setTimeout(image, 4000);
}
</script>
您可以看到上面的代码按预期工作。
关于javascript - for循环不会进入,不知道为什么,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40996267/