Question

I have a small problem with my jQuery image rotator.
Basically, my rotator should check if all images are loaded, and if they are it should display the first one on the top eq(5), and one after that one. My script works for the first image, but I don’t know how make it cycle through all images and to repeat itself.
Basically, I just want to know how to make my rotator cycle through all images in a infinite loop.

HTML:

<div id="reel">
<img src="images/reel6.jpg" />
<img src="images/reel5.jpg" />
<img src="images/reel4.jpg" />
<img src="images/reel3.jpg" />
<img src="images/reel2.jpg" />
<img src="images/reel1.jpg" />
</div>

jQuery:

$(document).ready(function(){
$("#reel img").hide();
eq=5;
$("#reel img").load(function(){
function promeni(eq){
    $("#reel img").eq(eq).show();
    $("#reel img").eq(eq-1).show();
    $("#reel img").eq(eq).delay(2000).fadeOut(2000);
}
promeni(eq);
});
});

Answer 1

Something like this should do the trick:

$("#reel img").hide();
var counter = $("#reel img").length;

var i = setInterval(function() {
            $("#reel img").eq(counter - 1).show();
            $("#reel img:visible").fadeOut(2000);
            counter--;
            if (counter === 0) {
                counter = 5;
            }
        }, 2000);

Crappy demo: http://jsfiddle.net/tJvLy/