我希望在一段时间后在我的图像中淡出/淡出,我遇到的问题是它只是不断地淡入和淡出相同的图像,而不是移到下一个3。在我看来,它似乎应该是有效的。
var LoopImage =
{
init: function()
{
//initial fade-in time (in milliseconds)
var initialFadeIn = 1000;
//interval between items (in milliseconds)
var itemInterval = 10000;
//cross-fade time (in milliseconds)
var fadeTime = 2500;
//count number of items
var numberOfItems = $('.explainerLink').length;
//set current item
var currentItem = 0;
//show first item
$('.explainerLink').eq(currentItem).fadeIn(initialFadeIn);
//loop through the items
var infiniteLoop = setInterval(function(){
$('.explainerLink').eq(currentItem).fadeOut(fadeTime);
if(currentItem == numberOfItems -1){
currentItem = 0;
}else{
currentItem++;
}
$('.explainerLink').eq(currentItem).fadeIn(fadeTime);
}, itemInterval);
}
};
LoopImage.init();HTML:
<img src="themes/base/img/img-1.png" class="active animated bounceInUp" />
<img src="themes/base/img/img-2.png" class="" />
<img src="themes/base/img/img-3.png" class="" />
<img src="themes/base/img/img-4.png" class="" />
</div>发布于 2015-04-13 22:29:02
正如您所说的,您的代码看起来应该可以工作。您只需要确保您的HTML匹配(例如,将类名显示在图像上):
http://jsfiddle.net/TrueBlueAussie/kLnzqagx/1/
<img id="image1" src="http://lorempixel.com/400/200/sports/1/" class="explainerLink"/><br/>
<img id="image2" src="http://lorempixel.com/400/200/sports/3/" class="explainerLink" /><br/>
<img id="image3" src="http://lorempixel.com/400/200/sports/5/" class="explainerLink"/><br/>https://stackoverflow.com/questions/29607466
复制相似问题