Continously Iterating each() loop in jQuery?

Question

Is it possible to continuously run an each() loop in jQuery?

I have a slideshow of images that fade in and out of eachother however when it gets to the last image it stops. My code is below:

jQuery

$('.slider-block').each(function(i) {

$(this).delay(4000*i).fadeTo(1000,1);

});

HTML

<div class="slider-block">

<img src="image1.png" />

</div>

<div class="slider-block">

<img src="image2.png" />

</div>

CSS

.slider-block { display: none; position: absolute; top: 0px; left: 0px; }

My aim is to have it loop through all the images and then go back to the first one and start all over again.

All the HTML and CSS works fine, its really only the jQuery part I need help with here.

** UPDATE **

Based on suggestions I have tried the following, however none of these loop through to the beginning again:

setTimeout(function(){  

$('.slider-block').each(function(i) { 

$(this).delay(4000*i).fadeTo(1000,1); }); 

} ,4000);

and

setInterval(function(){  

$('.slider-block').each(function(i) { 

$(this).delay(4000*i).fadeTo(1000,1); }); 

} ,4000);

and this one crashes my browser

while(true)
{
   $('.slider-block').each(function(i) {

       $(this).delay(4000*i).fadeTo(1000,1);

   });
}

Answer 1

let's imagine that you want to do an "each" Continuously on below array:

var your_array = [1, 2, 3];

you can write a function for walking on this array and then when you reached the last one you can run the function again:

var your_array = [1, 2, 3];
next = function () {
    var length = your_array.length,
        new_num;
    $.each(your_array, function(key, value) {
        new_num = value;
        if (length == key+1) {//we understand that we reached to the end of array
            alert(new_num);
            next();
        } else {
            alert(new_num);
        }

    });
}
next(); //output: 1 2 3 1 2 3 1 2 3 ...

Answer 2

Solution:

function cycleImages(){
    var $active = $('#slider-container .active');
    var $next = ($active.next().length > 0) ? $active.next() : $('.slider-block:first');
      $next.css('z-index',2);//move the next image up the pile
      $active.fadeOut(1500,function(){//fade out the top image
          $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
          $next.css('z-index',3).addClass('active');//make the next image the top one
      });
}        
$(function(){
    // run every 4s
    setInterval('cycleImages()', 4000);            
});

EDITED Answer (v2):

Top Image has a z-index of '3'. The next image is placed underneath is using a z-index of '2'. Therefore by fading out the top image, you have the impression that it is fading in seamlessly.

DEMO: http://jsfiddle.net/UhJm6/1/

NOTE: This solution will not work with images of type '.png' due to transparency issues. Use JPEG images by preference.

Source: http://www.simonbattersby.com/blog/simple-jquery-image-crossfade/

Answer 3

You could use the complete parameter of fadeTo to set next fade like this :

function fadeImg(i) {
    $('.slider-block').eq(i).delay(4000 * i).fadeTo(1000, 1, function () {
        fadeImg(i);
    });
}
$('.slider-block').each(function (i) {
    fadeImg(i);
});

But you'll have to hide them back once you've reach the end of the loop, otherwise they will be hidden by the last one. Something like that :

function fadeIn(i) {
    $('.slider-block').eq(i).delay(4000 * i).fadeTo(1000, 1, function () {
        fadeIn(i);
        fadeOut(i);
    });
}
function fadeOut(i) {
    $('.slider-block').eq(i).delay(4000 * (i+1)).fadeTo(1000, 0);
}
$('.slider-block').each(function (i) {
    fadeIn(i);
});

Sample here

Answer 4

You can use the setTimeout() function of Javascript to create an infinite loop.

Read more here.

If you don't want any pause, just set the timeout time accordingly.

Or either you can use this

While(true)
{
   $('.slider-block').each(function(i) {
       $(this).delay(4000*i).fadeTo(1000,1);
   });
}