javascript - J-query loop issues -

i have supposed simple jquery delayed image loop

the fiddle here

i have checked syntax , not know why refuses work.

all css , code seems correct.

here function

$(document).ready(function () { $.dotimeout('loop', 500, function () {     //changes background of img2 'i' in 'sequence'     $(".img2").css('background', 'url(' + sequence[i] + ')');     //increments 'i' next image     i++;     //toggles class      $("img1").toggleclass("img2");     //changes the background of img1 'i' in 'sequence' ready when class toggled again     $(".img1").css('background', 'url(' + sequence[i] + ')');     //toggles class     $("img2").toggleclass("img1");     //increments 'i; next change     i++;     //restarts loop if equal sequence length     if (i === sequence.length) {         = 0;     } }); 

toggleclass has there because intend later add css3 transitions make each image fade in

can help, please!

return true in callback loop happen again, mentioned in document.

$(document).ready(function(){   // start polling loop id of 'loop' , counter.   $.dotimeout('loop', 500, function(){        $('.img1').css('background', 'url(' + sequence[i] + ')');       i++;       return true;   }); }); 

another issue loop break array go out of bounds keep incrementing, instead use array.shift first element out of array , push end of array. elements in array go in cycle, dont have maintain counter , reset etc...

right way is:-

demo

var sequence = ["http://goo.gl/u4qhd",     "http://goo.gl/s5tmq",     "http://goo.gl/mmsq6",     "http://goo.gl/dteyw"];  $(document).ready(function(){   // start polling loop id of 'loop' , counter.   $.dotimeout('loop', 500, function(){      var url = sequence.shift(); //remove first element out of array       sequence.push(url); //push end of array. can put after next statement.       $('#img1').css('background', 'url(' + sequence[0] + ')');//get first item array. next 1 previous cycle.       return true;   }); });