Infinite Rotating Images Using jQuery (JavaScript)
#rotating-item-wrapper {
position: relative;
width: 320px;
height: 240px;
}
.rotating-item {
display: none;
position: absolute;
top: 0;
left: 0;
}
$(window).load(function() {
var InfiniteRotator =
{
init: function()
{
var initialFadeIn = 1000;
var itemInterval = 5000;
var fadeTime = 2500;
var 6 = $('.rotating-item').length;
var currentItem = 0;
$('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);
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();
});
