Simple Slideshow

Simple Slideshow

HTML

<div id="slideshow">
<div><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcRFyaTHO0L0dOzZvGpSssvycVqbIUs8q-XX_DDxT9ci08TDpDWk" alt="" /></div>
<div><img src="http://t1.gstatic.com/images?q=tbn:ANd9GcSUIEy1ITO8uUaVXCZahuETLTqA-h-IgCaBWD4dzEvn7Dv678kskg" alt="" /></div>
<div><img src="http://t0.gstatic.com/images?q=tbn:ANd9GcQJigrIv1_1Kwj9GHsZ6S9REGQtvTfFMP5gSa6q2OCKwV0nVETF" alt="" /></div>
    
    
    <div><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcQEZLYIsvVkUYd-OWRuMJsiGGeqtYdd_izoYfD-t_R6qwY6mz0ehQ" alt="" /></div>
    
    
</div>

CSS

#slideshow {

margin: 50px auto;position: relative; width: 80%; padding: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.4); height:400px} 

#slideshow > div { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; height:100% }

#slideshow img{}

JavaScript

$("#slideshow > div:gt(0)").hide();setInterval(function() {
$('#slideshow > div:first')
.fadeOut(150)
.next()
.fadeIn(150)
.end()
.appendTo('#slideshow');
}, 200);