Advanced Search

Infinite Loop: Rotating Images Using jQuery

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. $(window).load(function() { //start after HTML, images have loaded
  2.  
  3.     var InfiniteRotator =
  4.     {
  5.         init: function()
  6.         {
  7.             //initial fade-in time (in milliseconds)
  8.             var initialFadeIn = 1000;
  9.  
  10.             //interval between items (in milliseconds)
  11.             var itemInterval = 5000;
  12.  
  13.             //cross-fade time (in milliseconds)
  14.             var fadeTime = 2500;
  15.  
  16.             //count number of items
  17.             var numberOfItems = $('.rotating-item').length;
  18.  
  19.             //set current item
  20.             var currentItem = 0;
  21.  
  22.             //show first item
  23.             $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);
  24.  
  25.             //loop through the items
  26.             var infiniteLoop = setInterval(function(){
  27.                 $('.rotating-item').eq(currentItem).fadeOut(fadeTime);
  28.  
  29.                 if(currentItem == numberOfItems -1){
  30.                     currentItem = 0;
  31.                 }else{
  32.                     currentItem++;
  33.                 }
  34.                 $('.rotating-item').eq(currentItem).fadeIn(fadeTime);
  35.  
  36.             }, itemInterval);
  37.         }
  38.     };
  39.  
  40.     InfiniteRotator.init();
  41.  
  42. });

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.