-6

ブラウザーで開いたときに最後の画像のみを表示するヘルプ ループが機能しないのはなぜですか?

var i=0;
function set()
{
    for(i=1; i<=5; i++)
    {
        var image = "<img src=images/sl" + i + ".jpg"+"  width='500' height='300' style='margin-left:400px;' />";   
        document.getElementById("slider").innerHTML = image;        
    }
}
setInterval("set()","600");

        <div id="slider">   
            <img src="images/sl1.jpg" />
        </div>

JavaScript で簡単なスライダーを作成しますが、これを実行すると、5 つの画像 sl1 があるように、画像フォルダーから最後の画像のみが表示されます。sl2 |...sl5 ... 最後の画像 5 番目の私だけ ... ループが機能しない..

4

3 に答える 3

2

多分これはあなたが望むものですか？

function setImage(i) {
    var image = "<img src=images/sl" + i + ".jpg" + "  width='500' height='300' style='margin-left:400px;' />";
    document.getElementById("slider").innerHTML = image;
}

function loopImages(i) {
    setImage(i);    //    set current Image

    if (i == 5) {    
      i = 1;    //  reset the counter
    }

    setTimeout(function () {
        loopImages(i++);
    }, "600");    //    set next image in 600 ms

}

loopImages(1);

画像 5 で停止するか、永久にループするかはわかりません...

于 2013-06-21T15:33:18.500 に答える
1

設定するだけでなく、に追加する必要がありますinnerHTML。

var slider =document.getElementById("slider");
slider.innerHTML = slider.innerHTML + image;
于 2013-06-21T15:26:59.483 に答える
1

  1. DOM を変更するたびに、ブラウザーはページを再レンダリングする必要があります。パフォーマンスを向上させるには、新しい html を一時変数に格納することで、一度だけ実行してください。

  2. setInterval の最初のパラメーターは、文字列ではなく関数名にする必要があります。

var i=0;
function set()
{
    var new_html = '';
    for(i=1; i<=5; i++)
    {
        var image = "<img src=images/sl" + i + ".jpg"+"  width='500' height='300' style='margin-left:400px;' />";   
        new_html += image;        
    }
    document.getElementById("slider").innerHTML = new_html
}
setInterval(set,600);

<div id="slider">   
    <img src="images/sl1.jpg" />
</div>
于 2013-06-21T15:32:04.547 に答える