Javascript show imgs one by one with interval

Question

I have the below images and I'm trying to show them one by one by interval of 3 seconds, but I am not able to get it work. It continues to stay on 0 and does not show the image, help would be nice:

<img src="one.png"></img>
<img src="two.png"></img>

javascript :

window.animate = function(){
   var timer = '';
   var imgs = document.getElementsByTagName('img');
   for (var i = 0; i < imgs.length; i++) {
       var timer = setInterval(function(){
           alert(i);
            imgs[i].style.display = 'block';
       }, 3000);
       if(i == imgs.length){
           clearInterval(timer);
       }
   }
}

score 0 · Accepted Answer · answered Nov 10 '15 at 18:22

This might be what you're looking for:

window.animate = function(){
    var imgs = document.getElementsByTagName('img');
    var index = 0;
    var timer = setInterval(function() {
        // Hide all imgs
        for (var i = 0; i < imgs.length; i++)
            imgs[i].style.display = 'none';
        // Display next img
        imgs[index].style.display = 'block';
        index++;
        // Stop after all displayed.
        if (index >= imgs.length)
            clearInterval(timer);
    }, 3000);
}

Scorpius · Answer 2 · 2015-11-10T18:28:20.680

Since these are essentially all timing out at the same time, you need to implement a callback pattern to your interval to trigger the next one, or you need to increase the interval per index; i.e. set the timer's interval to 3000*(i+1), which will effectively trigger the next one at the delay plus the previous delay. This does not account for the actual images load however. Additionally, I would consider using setTimeout since you only need to do this once.

var img = $('img.targets');
for (var i=0;i<img.length;i++) {

  var duration = 3000;
  setTimeout( function() {
    // do dom work here
  }, duration*(i+1));


}

score 0 · Answer 3 · answered Nov 10 '15 at 18:25

Here is one way to do it:

Fiddle: http://jsfiddle.net/aecuappp/

HTML:

<img src="http://placehold.it/350x150"></img>
<img src="http://placehold.it/350x150"></img>
<img src="http://placehold.it/350x150"></img>
<img src="http://placehold.it/350x150"></img>
<img src="http://placehold.it/350x150"></img>
<img src="http://placehold.it/350x150"></img>

JS:

var imgs = document.getElementsByTagName('img');
var interval = 3000;
for (var i = 0; i < imgs.length; i++) {
    (function (index, time) {
        setTimeout(function() {
            imgs[index].style.display = 'block';
        }, time);
    } (i, interval));
    interval = interval + 3000;
}

CSS:

img {
    display: none;
}

Basically you can start interval at 0 if you want first image to show up immediately. And each time it adds 3 seconds to the timeout since these are all created roughly at the same time. I wrapped the setTimeout in an IIFE to give interval and index scope for when the timeout needs the values at the time we created the timeout.

score 0 · Answer 4 · edited May 23 '17 at 11:44

You can accomplish this by queuing up some timeouts using setTimeout and then making sure you are correctly passing the value of i to the function within. You can do that easily by using forEach instead of a regular loop:

window.animate = function() {
    var imgs = document.getElementsByTagName('img');

    imgs.forEach(function(img, i) {
        setTimeout(function() {
            img.style.display = 'block';
        }, (i + 1) * 3000);
    });
};

Javascript show imgs one by one with interval

4 Answers4