Question

我想制作一个程序，如果我们点击图像，不同的图像会一直显示，直到到达最后一个图像。因此，我在单击图像时使用jQuery调用函数，通过更改“src”属性开始循环遍历所有图像。所有图像按顺序编号，然后循环使用这些数字打印出png图像。

以下是HTML代码：

<img src="1.png" id="zwitch" height="50">

这是jQuery代码：

$(document).ready(function(){
    $("#zwitch").click(function(){
        for(var i = 0; i < 11; i++){
        $("#zwitch").attr("src", i + ".png");
        }
    });
});

文件夹“1.png，2.png，3.png，4.png .....”中有十张图片，没有错误，我只是想知道是否有办法在规定的时间段内显示所有图像。

Answer 1

试试这个，它从1到10运行，每个图像之间延迟1000ms（1秒）：

$(document).ready(function() {
  $("#zwitch").click(function() {
    var i = 1, counter = setInterval(function() {
      $("#zwitch").attr("src", i + ".png");
      if(i++ == 10) clearInterval(counter);
    }, 1000);
  });
});

Answer 2

您可以尝试：

$(document).ready(function(){
$("#zwitch").click(function(){
    for(var i = 0; i < 11; i++){
    setTimeout( $("#zwitch").attr("src", i + ".png"), 2000);
    }
});

}）;

此代码将显示您的图像2000毫秒（2秒）

现在你可以试试这个：

$(document).ready(function(){
var counter = 0;
$("#zwitch").click(function(){

var id = setInterval(function(){
$("#zwitch").attr("src", counter + ".png");
counter++;
if ( counter > 10 )
    clearInterval( id );
}, 2000)
});
}

Answer 3

如果你有10个不同的img标签并相应地显示它们会更好。第一个攻击的解决方案是使用setTimeOut函数但它在循环内部工作异常。

Answer 4

您可以将setTimeout用于显示图像一段时间。

$("#zwitch").click(function(){
    for(var i = 0; i < 11; i++){
       (function(i) {
          setTimeout(function() {
            $("#zwitch").attr("src", i + ".png");
          }, i * 5000);
       })(i);
    });
});

Answer 5

我会这样说：

$(document).ready(function(){
    var z = $("#zwitch");
    var i = 1;
    var id = null;
    function updateImage() {
        z.attr("src", "http://www.tuxpaint.org/stamps/stamps/symbols/math/" + (++i) + ".png");
        if (5 <= i) { clearInterval(id); }
    }
    z.click(function(){
        id = setInterval(updateImage, 1000);
    });
});

在这里演示（不要忘记点击图片）：http://jsfiddle.net/v5QXe/

注意：只有5张图片，juste将10替换为10。

如何一次执行一个循环语句（jQuery）？

5 个答案: