Advanced Search

Simplest jQuery Slideshow

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

Expand | Embed | Plain Text

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.