Is there any scripts I can use to create a slideshow where a picture fades out and another replaces it. I am using the list below to list the images. The scripts I see currently slides the images left and right but none fades in an out.
<ul class="slideshow">
<li><img src="images/image1.gif" /></li>
<li><img src="images/image2.gif" /></li>
<li><img src="images/image3.gif" /></li>
<li><img src="images/image4.gif" /></li>
<li><img src="images/image5.gif" /></li>
<li><img src="images/image6.gif" /></li>
</ul>
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>