Question

我正在编写一个非常简单的JavaScript幻灯片，但它无法正常工作。我不想要jQuery。此代码显示5秒后的第一张图像，但不会循环显示其余图像。完整的代码如下，我只是无法弄清楚我做错了什么：

<!DOCTYPE html>
<html dir="ltr" lang="en">
    <head>
        <title>JavaScript Slideshow</title>
        <style>
        #slider > img { display: none }
        </style>
    </head>
    <body>
        <div id="slider">
            <img src="img1.png">
            <img src="img2.png">
            <img src="img3.png">
            <img src="img4.png">
            <img src="img5.png">
        </div>
        <script>
            var s = document.getElementById("slider").getElementsByTagName("img");
            var c = s.length;
            setInterval(function() {
                s[(s.length++) % c].style.display="block";
            }, 5000);
        </script>
    </body>
</html>

Answer 1

您的代码中有多处错误。

您正在尝试增加数组长度，并通过计数器对其进行模数化。我打赌你想要反过来这样做：

s[c % (s.length)].style.display="";

您没有隐藏已经循环过的图像，因此您的周期只会显示一次。

    var s = document.getElementById("slider").getElementsByTagName("img");
    var c = s.length;
    setInterval(function() {
        s[c % s.length].style.display="";
        s[(++c) % s.length].style.display="block";
    }, 5000);

JavaScript幻灯片不起作用

1 个答案: