1

我正在编写一个非常简单的 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>
4

1 回答 1

2

您的代码中有几个错误。

  1. 您正在尝试增加数组长度，并通过计数器对其取模。我敢打赌你想反过来做：

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

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

        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);
于 2012-09-30T14:29:44.130 回答