Change Attribute Every Second

Question

I want an image to change every second. I'm having trouble with setInterval. Could someone post a quick snippet on how to do this

This is what I came up with.

var images = 'images/image_*.png';
for(var i = 1; i <= 5; i++){
    function changeImg(){
     var path = images.replace('*', i);
     $('img').attr('src', path);
    }
    setInterval('changeImg()', 1000);
}

Answer 1

In your code you are calling the setInterval function 5 times which really is not necessary. Also as the loop will execute once, the value of i will always be 5 so it won't work as you expect. You may try this instead:

var images = 'images/image_*.png';
var i = 1;
setInterval(function() {
    var path = images.replace('*', i);
    $('img').attr('src', path);
    i = i + 1;
    if (i == 6) i = 1;
}, 1000);

Answer 2

var images = 'images/image_*.png';
var i = 1;
function changeImg(i){
    var path = images.replace('*', i);
    $('img').attr('src', path);
}

setInterval('changeImg('+ ( (i++)%6 ) +')', 1000);

Maybe something like this ? I didn't test it though.

Answer 3

Your loop was still continuing without waiting. Try writing it this way:

var images = 'images/image_*.png',
    i      = 1;

function changeImg(){
    var path = images.replace('*', i);
    $('img').attr('src', path);
    i = (i == 5 ? 0 : i + 1);
}

window.setInterval(changeImg, 1000);