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

Question

I want to make a program in which if we click on an image, different images keep appearing till the last one is reached. So, I used jQuery to call a function when the image is clicked, which starts a loop through all the images by changing the "src" attribute. All the images are numbered in order and then the loop uses those numbers to print out the png images.

Here is the HTML code:

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

Here is the jQuery code:

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

There are ten images in the folder "1.png, 2.png, 3.png, 4.png.....", There are no errors, I just wanted to know if there is a way to show all the images for a defined period of time.

Answer 1

Try this, it runs from 1 to 10 with 1000ms delay between each image (1 second):

$(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

You can try:

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

});

This code will show your image for 2000 milisecond (2 seconds)

Now you can try This:

$(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

it could be better if u have 10 different img tags and display them accordingly. the first solution that strikes is to use setTimeOut function But it works abnormal inside for loop.

Answer 4

You can use setTimeout for show image for some time.

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

Answer 5

I would say something like this:

$(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);
    });
});

Demo here (don't forget to click the image): http://jsfiddle.net/v5QXe/

Note: only 5 images available, juste replace 5 by 10.