Advanced Search

Loop between images

/ Published in: jQuery
Save to your folder(s)
Endless loop between 3 images

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. $('document').ready(function() {
  2.  
  3.     var $imgs = $('#slideshow > img'), current = 0;
  4.  
  5.     var nextImage = function() {
  6.         if (current >= $imgs.length) current = 0;
  7.         $imgs.eq(current++).fadeIn(function() {
  8.             $(this).delay(3000).fadeOut(nextImage);
  9.         })
  10.     };
  11.     nextImage();
  12.  
  13. });
  14.  
  15.  
  16. HTML
  17.  
  18. <div id="slideshow">
  19.           <img src="<?=$this->staticPath?>/img/girl01.jpg">
  20.           <img src="<?=$this->staticPath?>/img/girl02.jpg">
  21.           <img src="<?=$this->staticPath?>/img/girl03.jpg">
  22.         </div>
  23.  
  24.  
  25. CSS
  26.  
  27. #slideshow img {
  28.   display: none;
  29. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.