Last active
May 14, 2019 10:28
-
-
Save freshsnippets/2582799 to your computer and use it in GitHub Desktop.
JavaScript: Infinite Loop Rotating Images Using jQuery
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(window).load(function() { //start after HTML, images have loaded | |
var InfiniteRotator = | |
{ | |
init: function() | |
{ | |
//initial fade-in time (in milliseconds) | |
var initialFadeIn = 1000; | |
//interval between items (in milliseconds) | |
var itemInterval = 5000; | |
//cross-fade time (in milliseconds) | |
var fadeTime = 2500; | |
//count number of items | |
var numberOfItems = $('.rotating-item').length; | |
//set current item | |
var currentItem = 0; | |
//show first item | |
$('.rotating-item').eq(currentItem).fadeIn(initialFadeIn); | |
//loop through the items | |
var infiniteLoop = setInterval(function(){ | |
$('.rotating-item').eq(currentItem).fadeOut(fadeTime); | |
if(currentItem == numberOfItems -1){ | |
currentItem = 0; | |
}else{ | |
currentItem++; | |
} | |
$('.rotating-item').eq(currentItem).fadeIn(fadeTime); | |
}, itemInterval); | |
} | |
}; | |
InfiniteRotator.init(); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment