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

Question

我已经为此苦苦挣扎了很长时间了。

我有一个div，我想使它每隔X秒出现一次，并使每隔Y秒消失一次。 没问题，我有这样的东西：

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>

它就像一个魅力！

但是当我想用倍数图像制作相同的东西时我很生气:(

我希望每次我的主要#container出现时，那里的图像都发生变化（并循环）。

我想到过做类似的事情：

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

和

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);
});

但是我找不到一种方法来增加我的:eq(i)第5行中的i变量，并使其与#container div中的项目数（ img ）循环。

在这种情况下，以以下方式显示图像：1> 2> 3> 1> 2> 3> ...

感谢您的建议！

Answer 1

您需要在显示下一个img之前增加var，以便它可以在$（“ img：eq（i）”）。show（）之后。 或在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/

或者你可以像这样使用.delay（）

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