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. すでに循環している画像を隠しているわけではないので、循環は 1 回だけ表示されます。

        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 に答える