jQuery simple image fade in/out slideshow

The fallowing example shows how to make slideshow of images with fade in/out nice smooth transition. jQuery makes everything easy.
Note that all images are defined at the start(they will load all together from the beginning) and while this will work for small amount of images it might be wrong solution for gallery of 10 images or more.
Example also uses corner jQuery plugin to round image corners.

open slideshow frame in new window
[JS]
var fadeDuration=2000;
var slideDuration=4000;
var currentIndex=1;
var nextIndex=1;
$(document).ready(function()
{
$(‘ul.slideshow li img’).corner();
$(‘ul.slideshow li’).css({opacity: 0.0});
$(“‘ul.slideshow li:nth-child(“+nextIndex+”)’”).addClass(‘show’).animate({opacity: 1.0}, fadeDuration);
var timer = setInterval(‘nextSlide()’,slideDuration);
})

function nextSlide(){
nextIndex =currentIndex+1;
if(nextIndex > $(‘ul.slideshow li’).length)
{
nextIndex =1;
}
$(“‘ul.slideshow li:nth-child(“+nextIndex+”)’”).addClass(‘show’).animate({opacity: 1.0}, fadeDuration);
$(“‘ul.slideshow li:nth-child(“+currentIndex+”)’”).animate({opacity: 0.0}, fadeDuration).removeClass(‘show’);
currentIndex = nextIndex;
}

[/JS]

Bookmark and Share

16 Responses to “jQuery simple image fade in/out slideshow”


Leave a Reply