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

不要重新发明轮子

除非你试图自己教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 3

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

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”参数，因为否则2个元素会同时显示，除非它们精确定位（或者你将效果链接起来），否则很难看。

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

});

使用jQuery在div之间切换

4 个答案: