for循环无法在javascript中工作

for Loop not working in javascript?

本文关键字：javascript 工作 循环 for      更新时间：2023-09-26

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

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。。。只有我最后一张照片第五张。。。循环不工作。。

也许这就是你想要的？

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

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

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

  1. 每次更改DOM时，浏览器都必须重新呈现页面。为了获得更好的性能，只需将新的html存储在临时var.中即可

  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>
相关文章：