Question

当我在浏览器中打开它时，只显示最后一张图片帮助为什么循环不起作用？

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 ...循环不工作..

Answer 1

也许这就是你想要的？

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上还是永远循环......

Answer 2

您必须附加到innerHTML，而不仅仅是设置它。

var slider =document.getElementById("slider");
slider.innerHTML = slider.innerHTML + image;

Answer 3

每次更改DOM时，浏览器都必须重新呈现页面。为了获得更好的性能，只需将新的html存储在临时变量中即可。
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>

for Loop无法在javascript中运行？

3 个答案: