如何使一个闪烁的元素连续显示图像？

Question

I have been struggling with this for quite a time now.

I have a div that i want to make appear every X seconds and make disappear every Y seconds. No problem for that, I've got something like :

jQuery :

function makeContainerAppear(displayTime, interval) {
     setInterval( function() {
         $("#container").show("slow","swing");
         setTimeout( function() {
             $("#container").hide("slow","swing");
         }
         , displayTime * 1000);
     , interval * 1000);
}

$(document).ready(function() {
    $("#container").hide();
    makeContainerAppear(5,10);
});

Html :

<div id="container" class="forced-ad">
    <div class="dummy"></div>
    <div class="container-img centerer">
        <img class="centered" src="http://placekitten.com/200/200">
    </div>
</div>

And it works like a charm!

But i'm pretty annoyed when i want to make the same thing with multiples images :(

I want that each time my main #container appear that the image in there change (and cycle).

I have thought of make something like :

<div id="container" class="forced-ad">
    <div class="dummy"></div>
    <div class="img-container centerer">
        <img class="centered" src="http://placekitten.com/200/200" alt="forced-ad">
        <img class="centered" src="http://placekitten.com/201/200" alt="forced-ad">
        <img class="centered" src="http://placekitten.com/200/201" alt="forced-ad">
    </div>
</div>

and

function makeContainerAppear(displayTime, interval) {
    setInterval( function() {
        $("#container").show("slow","swing");
        $("img").hide();
        $("img:eq(i)").show();
        setTimeout( function() {
            $("#container").hide("slow","swing");
        }
        , displayTime * 1000);
    , interval * 1000);
}

$(document).ready(function() {
    $("#container").hide();
    makeContainerAppear(5,10);
});

But i can't find a way to increment my i variable in the :eq(i) line 5 and to make it cycle with the number of items ( img ) in the #container div.

in this case make appear the image in that manner : 1 > 2 > 3 > 1 > 2 > 3 > ...

Thanks for your suggestions !

Answer 1

you need to increment the var before you show the next img so it can be after the $("img:eq(i)").show(); or inside the setTimeout( function() {

var i=0;//declare the i variable
function makeContainerAppear(displayTime, interval) {
        setInterval( function() {
            $("#container").show("slow","swing");
            $("img").hide();
            //$("img:eq("+i+")") or $("img").eq(i)
            //i++ can be here 
            $("img:eq("+i+")").show();
            setTimeout( function() {
                //check if it is less than 3 return to 0 or use i%3 inside eq 
                i++;
                $("#container").hide("slow","swing");
            }
            , displayTime * 1000);
        }, interval * 1000);
}    

http://jsfiddle.net/wxKx2/1/

or you can use .delay() like this

//declare the adIndex variable and save the container and imgs elements
var adIndex=0,$container=$("#container"),$ads=$(".img-container").children("img");
function makeContainerAppear() {
     //hide all $ads and only show the one in adIndex
     $ads.hide().eq(adIndex%3).show();
     $container.hide().delay(10000).show("slow","swing")
                    .delay(5000).hide("slow","swing",function(){
                        adIndex++;
                        //call the same function when container is hidden
                        makeContainerAppear();
                    });
}
makeContainerAppear();    

http://jsfiddle.net/wxKx2/