Tiny jQuery Crossfading Image Slideshow Plugin - Infinite Rotator

Infinite Rotator is a jQuery slideshow plugin that cycles through a list of images with support for crossfade effect and endless loop. Good for infinite banner rotator and image rotator.

How to use it:

1. Include jQuery library and the jQuery infinite rotator plugin in the Html page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/infinite-rotator.js"></script>

2. Create a list of rotating images.

<div id="wrapper"> 
<img src="images/1.jpg" alt="" class="rotating-item" width="980" height="347" /> 
<img src="images/2.jpg" alt="" class="rotating-item" width="980" height="347" /> 
<img src="images/3.jpg" alt="" class="rotating-item" width="980" height="347" /> 
</div>

3. The required CSS styles.

#wrapper {
position: relative;
width: 980px;
height: 347px;
}
.rotating-item {
display: none;
position: absolute;
top: 0;
left: 0;
}

4. Set options.

//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);

---

This awesome jQuery plugin is developed by mcnitt. For more Advanced Usages, please check the demo page or visit the official website.