Question

我希望在设定的间隔后淡出/淡化我的图像，我遇到的问题是它不断地逐渐淡入和淡出相同的图像而不是移动到下一个图像。任何想法只是从看起来在吗？在我看来好像它应该工作。

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>

Answer 1

正如您所说，您的代码看起来应该可行。您只需要确保您的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/>

jQuery没有循环遍历图像

1 个答案: