/* jQuery & CSS slideshow 
==================================
This solution combines CSS & JS. The JS works through 
the list items changing the CSS class. The CSS changes the 
opacity and z-index of the active and last active <li>.
To add more items to the slideshow, simply add them 
to the mark-up. This is a variration on Jon Raasch's
technique:
http://jonraasch.com/blog/a-simple-jquery-slideshow 

Mark-up
================================== 
The <ul> is wrapped in a <div> with an ID of slideshow 
and the class of "active" is added to the first <li>.

CSS
================================== 
The following is required in the CSS to fade the slides.

#slideshow {
	position: relative;
	height: [enter height];
	}

#slideshow li {
	position:absolute;
	top:0;
	left:0;
	z-index:8;
	opacity:0.0;
	}

#slideshow li.active {
	z-index:10;
	opacity:1.0;
	}
	
#slideshow li.last-active {
	z-index:9;
	} 
*/
	

function slideshow() {
    var $active = $('#slideshow LI.active');

    if ( $active.length == 0 ) $active = $('#slideshow LI:last');

    var $next =  $active.next().length ? $active.next()
        : $('#slideshow LI:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 500, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideshow()", 7000 );
});