Simplest jQuery Slideshow


/ Published in: jQuery
Save to your folder(s)



Copy this code and paste it in your HTML
  1. $(function(){
  2. $('.fadein img:gt(0)').hide();
  3. setInterval(function(){
  4. $('.fadein :first-child').fadeOut()
  5. .next('img').fadeIn()
  6. .end().appendTo('.fadein');},
  7. 3000);
  8. });
  9.  
  10. // HTML Markup
  11. <div class="fadein">
  12. <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
  13. <img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
  14. <img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
  15. </div>
  16.  
  17. // CSS
  18. .fadein { position:relative; width:500px; height:332px; }
  19. .fadein img { position:absolute; left:0; top:0; }

URL: http://snook.ca/archives/javascript/simplest-jquery-slideshow

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.