使用 jQuery 在 div 之间切换

Question

我有两个 div 框 promo1 和 promo2。显示 promo1，而隐藏 promo2。每隔 x 秒，我想切换一下框，以便它隐藏 promo1 并淡入 promo2，反之亦然。

请原谅我的脚本技巧，我还在学习哈哈。 这就是我到目前为止所得到的。

function switch1(){
      $("#promo1").hide("fast");
      $("#promo2").fadeIn("slow");
}
function switch2(){
      $("#promo2").hide("fast");
      $("#promo1").fadeIn("slow");
}
$(document).ready(function() {

setInterval( "switch1()", 5000 );
setInterval( "switch2()", 10000 );

});

现在，正如您所看到的，问题是 switch2 与 switch1 重叠。有没有更简单的方法来实现我在这里想要实现的目标？

Answer 1

只需使用 .toggle();

function switch1(){
      $("#promo1").toggle('slow');
     $("#promo2").toggle('slow');
}

$(document).ready(function() {
$("#promo2").hide();
setInterval(switch1, 5000 );


});

http://jsfiddle.net/niklasvh/X6G9Y/

Answer 2

您可以使用变量在状态之间切换：

var current_promo = 1;
function switch_promo(){
    if (current_promo == 1) {
        $("#promo1").hide();
        $("#promo2").fadeIn("slow");
        current_promo = 2;
    } else {
        $("#promo2").hide();
        $("#promo1").fadeIn("slow");
        current_promo = 1;
    }
}
setInterval(switch_promo, 1000);

我删除了 hide 上的“fast”参数，因为否则这两个元素会同时显示，除非它们精确定位（或者您链接了效果） ），太丑了。

Answer 3

不要重新发明轮子

除非您想自学 jQuery，否则最好的解决方案是使用更确定的东西，例如 jQuery 的 Cycle 插件： http://jquery.malsup.com/cycle/

除非您真的想要。 ..

如果您想推出自定义解决方案，以下内容可能会有所帮助。另请注意，与提供的其他一些答案不同，以下内容适用于任意数量的促销 div。当然，您只提到了两个，但您不应该把自己逼到角落：

/* Hide all but first promo div */
$("div[id^=promo]:gt(0)").hide();

/* Setup Interval */
setInterval(function(){
  /* Hide visible div, get reference to next promo div */
  reference = $("div:visible").hide().next("div[id^=promo]");
  /* If there is not a next promo div, show the first promo div */
  reference.length ? $(reference).fadeIn() : $("div:first").fadeIn() ;
  /* Do this every five seconds */
}, 5000);

在线演示： http://jsbin.com /ewusu5/edit

请务必在文档末尾执行此逻辑，或者在如下所示的现成安全方法中执行此逻辑：

$(function(){
  /* code to be ran when document is ready */
});

Answer 4

我扩展了已经显示的内容，并添加了一个可以在任何地方使用和放置的指示器功能。 http://jsfiddle.net/BadBoyBill/8yHmy/

$(document).ready(function(){

    $("div[id^=marquee]:gt(0)").hide();

    function startTimer(){
        i = setInterval(rotate, 2000);
        return i;
    }

    var intID = startTimer();

    function stopTimer(){
        clearInterval(intID);
    }

    function rotate(){
        reference = $("div[id^=marquee]:visible").hide().next("div[id^=marquee]");
        reference.length ? $(reference).fadeIn() : $("div[id^=marquee]:first").fadeIn() ;
        dot = $(".indicator-on[id^=indicator]").removeClass("indicator-on").next("a[id^=indicator]").addClass("indicator-on");
        dot.length ? $(dot).addClass("indicator-on") : $("a[id^=indicator]:first").addClass("indicator-on");
    }

    $("div[id^=marquee]").each(function(){
        $("#indicators").append("<a href='#' id='indicator' class='indicator'></a>");
        $(".indicator:first").addClass("indicator-on");
    });

    $("a[id^=indicator]").click(function(e){
        var index = $("a[id^=indicator]").index(this);
        //alert(index);
        $("div[id=marquee]").hide();
        $("div[id=marquee]").eq(index).show();
        $("a[id=indicator]").removeClass("indicator-on");
        $("a[id=indicator]").eq(index).addClass("indicator-on");
        stopTimer();
        intID = startTimer();
        e.preventDefault();
    });

    $("a[id=indicator], div[id=marquee]").mouseenter(function(){
        stopTimer();
        //alert("mouseenter");
    }).mouseleave(function(){
        stopTimer();
        intID = startTimer();
        //alert("mouseexit");
    });

});​