Question

I have to create a automatic slideshow with images, I would like to put every image in a different position into the body tag, so I have created one div for every image.
I’m using jQuery each() to show all the images

<div id="img1" class="images" ><img  src="img/works/img1.jpg"/></div>
<div id="img2" class="images" ><img src="img/works/img2.jpg"/></div>
...


<script>
var arr = ["img1", "img2",..., "img22" ];

var $fade_in=1500;

$.each(arr, function images(i) {
$("#" + this).delay(i*1000).show($fade_in);
});     
</script>

It works. Now, how can I obtain the function recursive? I need a infinite loop

I have seen those links,
http://jsfiddle.net/maniator/F6nJu/1/
http://jsfiddle.net/JJfKM/138/
but I can’t apply they in my code.

Sorry for my english.

Answer 1

You can use setInterval() to repeatedly run the slides forever.

function runSlides() {
    var index = 0;
    var imgList$ = $(".images");

    setInterval(function () {
        // hide previous slide
        imgList$.eq(index).hide(1500);
        // show next slide
        ++index;
        if (index >= imgList$.length) {
            index = 0;
        }
        imgList$.eq(index).show(1500);
    }, 2500);    
}

And, the at some point in your code, you would call this by using:

runSlides();

In this example, I’ve hidden the previous slide and shown the next one on each interval which isn’t something you did in your example, but I figure you have to do something like that to get it to repeat over and over again.

Working example here: http://jsfiddle.net/jfriend00/4STRU/.