首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >jQuery不在图像中循环

jQuery不在图像中循环
EN

Stack Overflow用户
提问于 2015-04-13 22:11:27
回答 1查看 45关注 0票数 0

我希望在一段时间后在我的图像中淡出/淡出,我遇到的问题是它只是不断地淡入和淡出相同的图像,而不是移到下一个3。在我看来,它似乎应该是有效的。

代码语言:javascript
复制
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:

代码语言:javascript
复制
<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>
EN

回答 1

Stack Overflow用户

发布于 2015-04-13 22:29:02

正如您所说的,您的代码看起来应该可以工作。您只需要确保您的HTML匹配(例如,将类名显示在图像上):

http://jsfiddle.net/TrueBlueAussie/kLnzqagx/1/

代码语言:javascript
复制
<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/>
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/29607466

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档