Simple JQuery Slide Show

Setelah dari tadi pusing muter2 mikirin gimana caranya bikin image slide show yang simple dan ringan jika nantinya akan saya loading di web saya. Hampir 2 jam dan masih belum menemukan caranya akhirnya saya coba aja iseng-iseng googling (maklum newbie..hehehe) ..akhirrnya saya berhasil menemukan tips yg saya dapat dari blognya Jonraasch. Disini saya tidak bermaksud untuk plagiat dan hanya bermaksud untuk meneruskan informasi yang ada dan semoga berguna..hehehe

Adapun struktur html yang dibentuk adalah sebagai berikut :

</pre>
<div id="slideshow">
<div class="active"><a href="http://anggacatch.wpordpress.com/"><img src="image1.jpg" alt="Slideshow Image 1" /></a></div>
<div><a href="http://anggacatch.wpordpress.com/"><img src="image2.jpg" alt="Slideshow Image 2" /></a></div>
<div><a href="http://anggacatch.wpordpress.com/"><img src="image3.jpg" alt="Slideshow Image 3" /></a></div>
<div><a href="http://anggacatch.wpordpress.com/"><img src="image4.jpg" alt="Slideshow Image 4" /></a></div>
</div>
<pre>

Struktur CSS:

#slideshow {
    position:relative;
    height:400px;
}

#slideshow DIV {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
    height: 400px;
    background-color: #FFF;
}

#slideshow DIV.active {
    z-index:10;
    opacity:1.0;
}

#slideshow DIV.last-active {
    z-index:9;
}

#slideshow DIV IMG {
    height: 350px;
    display: block;
    border: 0;
    margin-bottom: 10px;
}

Nah ini script function untuk slide picturenya:

<script type="text/javascript">// <![CDATA[
<script type="text/javascript">

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

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

    // use this to pull the divs in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow DIV:first');

    // uncomment below to pull the divs randomly
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );

    $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 );
});
// ]]></script>

Untuk download script lengkap nya bisa disini download
(Sumber: http://jonraasch.com/