Jquery淡入淡出在3个div之间旋转

我正试图在3个div之间淡出旋转,当前代码：

$(window).load(function(){
var div1 = $("#apDiv1");
var div2 = $("#apDiv2");

function fade() {
    div1.stop(true,true).fadeIn(2000);
    div2.stop(true,true).fadeOut(2000,function() {
        // swap in/out
        var temp = div1;
        div1 = div2;
        div2 = temp;
        // start over again
        setTimeout(fade,1000);
    });
}

// start the process
fade(); })

这适用于2个div,但是可以在旋转中插入第3个吗？

我试过这样：

$(window).load(function(){
var div1 = $("#apDiv1");
var div2 = $("#apDiv2");
var div3 = $("#apDiv3");

function fade() {
    div1.stop(true,true).fadeOut(2000);
    div3.stop(true,true).fadeIn(2000);
    div1.stop(true,function() {
        // swap in/out
        var 
        temp = div1
        div1 = div2;
        div2 = div3;
        div3 = div1;
        div1 = temp
        // start over again
        setTimeout(fade,1000);
    });
}

// start the process
fade(); })

但这只是跳过它/根本不起作用.

解决方法

为了公平,如果你要使用两个以上的div我会重写那个函数,所以它会做任何数量,而不只是三个div

我假设你的div看起来像这样(我给了他们一类淡入淡出,起始的有一类当前的)

<div id="apDiv1" class="fade current"></div>
<div id="apDiv2" class="fade"></div>
<div id="apDiv3" class="fade"></div>

给定此结构,您可以在window.load中使用以下jquery：

var divs = $('.fade');

function fade() {
    var current = $('.current');
    var currentIndex = divs.index(current),nextIndex = currentIndex + 1;

    if (nextIndex >= divs.length) {
        nextIndex = 0;
    }

    var next = divs.eq(nextIndex);

    next.stop().fadeIn(2000,function() {
        $(this).addClass('current');
    });

    current.stop().fadeOut(2000,function() {
        $(this).removeClass('current');
        setTimeout(fade,2500);
    });
}

fade();

Example