Simple JQuery Slideshow

Lay all the images which are going to be used in a div

<div id="slideshow"> <img src="img/img1.jpg" alt="" class="active" /> <img src="img/img2.jpg" alt="" /> <img src="img/img3.jpg" alt="" /> </div>

Small CSS to change the z-index of our slides

#slideshow { position:relative; height:350px; } #slideshow IMG { position:absolute; top:0; left:0; z-index:8; } #slideshow IMG.active { z-index:10; } #slideshow IMG.last-active { z-index:9; }

Slideshow function written in core functions of JQuery

function slideSwitch()
{
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
var $next = $active.next().length ? $active.next() : $('#slideshow IMG:first');
$active.addClass('last-active');
$next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); }

$(function() { setInterval( "slideSwitch()", 5000 ); });

This is from the site
http://jonraasch.com/blog/a-simple-jquery-slideshow