This was the simplest I could get, its a circular gallery, it starts over when it reaches the end.
Here is a fiddle: http://jsfiddle.net/KA4Zq/
var count = 1;
setInterval(function() {
count = ($(".slideshow :nth-child("+count+")").fadeOut().next().length == 0) ? 1 : count+1;
$(".slideshow :nth-child("+count+")").fadeIn();
}, 2000);
The only thing you should change is the 2000 value (2sec). If you add more images to the gallery you don’t need to set any other variable, the script do everything by it self…
And to be event simpler, I changed your html too, there’s no need to have a ul list
, just a div
with images inside:
<div class="slideshow">
<img src="" />
<img src="" />
...
</div>
6
solved Simple jQuery fade in fade out image [closed]