This is a really awsome effect. Based on this writting http://jonraasch.com/blog/a-simple-jquery-slideshow , I just want to rewrite everything in my own site. And also one thing that you should consider about is in Magento, because of the confliction between Prototype and jQuery, the script in this effect won’t work properly. So, let change the $ in Jquery script in the head to jQuery and see how it works.

1) Insert in html page :
<div id="slideshow">
    <img src="img/img1.jpg" alt="" class="active"/>

    <img src="img/img2.jpg" alt="" />
    <img src="img/img3.jpg" alt="" />
</div>



2)  Insert in CSS :
#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;
}

3)  Insert the script  in the head of html :

jQuery.noConflict();

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

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

    var $next =  $active.next().length ? $active.next()
        : jQuery('#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');
        });
} jQuery(function() {
    setInterval( "slideSwitch()", 5000 );
});

And don't forget to update your Jquery script. Enjoy !
http://developmentblog.vitahorizon.com