Simple Slideshow

Simple Slideshow

by Emmanuel Garcia

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 {

 auto;position: relative; width: 240px; height: 240px;  } #slideshow > div { position: absolute;  }

#slideshow img{width: 240px; height: 240px;}

JavaScript

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