-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 回答