CODEWITHSUNDEEP
jquery
Alex
Alex

Reputation: 673

jQuery not looping through image

I'm looking to fadeout / fadein my images after a set interval, the issue I'm having is that it's just constantly fading in and out of the same image rather than moving onto the next 3. Any ideas just from looking at it? it seems to me as if it should be working.

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>

Upvotes: 0

Views: 49

Answers (1)

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93561

As you stated your code looks like it should work. You just need to ensure your HTML matches (e.g. has the class name present on the images):

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

Upvotes: 2

Related Questions