Slideshow using jquery

Just a simple slideshow using jquery

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

Now let’s use CSS to position the images on top of each other and bring the active image to the top level with z-index:

#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;
}

The main javascript code

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 );
});
The complete code


Download the code here
Note you can get the JS file from http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js

Related posts:

1. Replacing images with time intervals using jquery
2. Jquery Basics, How to use jquery?
3. Load Another Webpage Content Using Simple Jquery
4. Simple Javascript Slideshow
5. Simple message slideshow news ticker using javascript
6. Expand and collapse toggle div using jquery