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

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

在这种情况下，make以这种方式出现图像：1＆gt; 2＆gt; 3> 1> 2＆gt; 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/

如何在闪烁的元素中连续出现图像？

1 个答案: