I have a slideshow that is almost perfect in fitting my needs. I just need to change a couple of things:
- The slideshow should not fade in and out if there is only one image.
- The slideshow should not fade in when the page is loaded.
Thanks!
I have the code here:
$(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();
});
Html code:
<div id="rotating-item-wrapper">
<img src="images/slider/1.jpg" class="rotating-item" />
<img src="images/slider/2.jpg" class="rotating-item" />
<img src="images/slider/3.jpg" class="rotating-item" />
</div>
Aucun commentaire:
Enregistrer un commentaire