Home

jQuery SlideShow - Short and Sweet

$(function(){
    $('#slides img:gt(0)').hide();
    setInterval(function(){
        $('#slides :first-child').fadeOut().next('img').fadeIn(1000).end().appendTo('#slides');
    },6000);
});


The other half is the simple HTML and CSS. We need to set the other images to display none and make sure that the overflow of the #slides div is hidden. Otherwise the slide are will grow vertically when transitioning.
<div id="slides">
   <img alt="alt" title="title" src="img1.png" />
   <img alt="alt" title="title" src="img2.png" style="display: none; />
   <img alt="alt" title="title" src="img3.png" style="display: none; />
</div>


div#slides {
	width:745px;
	height:400px;
	overflow:hidden;
	height:294px;
	background:#000;
	margin-bottom:10px;
}

See a working example at bestMPCsamples.com