创建显示/隐藏连续循环所需的简单jQuery脚本

据我所知，我已经在这个论坛上研究了这些问题，但还没有完全得到答案。
我是jQuery方面的新手。
我有这个部门

<div id="main">
    <div id="1" class="trip">Item1</div>
    <div id="2" class="trip">Item2</div>
    <div id="3" class="trip">Item3></div>
</div>

项目1
项目2
项目3>

我想依次淡入每个div，然后隐藏并淡入下一个div。
我想让它在div中连续循环，直到访问者离开页面。
我需要一步一步的帮助才能做到这一点。
我是stackoverflow的新手，但我学得很快，所以请容忍我：）

非常感谢您的帮助。

---

//otu_Gu

您可以使用jquery切换

<div id="main" style='display:none'>
     <div id="1" class="trip">Item1</div>
     <div id="2" class="trip">Item2</div>
     <div id="3" class="trip">Item3></div> 
</div>
<button id='mb'>Chick here</button>

---

创建一个函数并将其用作淡出的回调函数，当元素淡出时将调用该函数

var $elem = $('#main .trip'), l = $elem.length, i = 0;

function comeOn() {
    $elem.eq(i % l).fadeIn(700, function() {
        $elem.eq(i % l).fadeOut(700, comeOn);
        i++;
    });
}

---

下面介绍如何使用递归和元素ID列表来实现更灵活的解决方案

var ids = ["#1","#2","#3"],
    time = 1000;


function cycleShowHide (i,ids,time) {
    if (i>=ids.length) {
        i = 0;
    }
    //hide previous
    if (i==0) {
        $(ids[ids.length-1]).hide(time);
    } else {
        $(ids[i-1]).hide(time);
    }
    //show next and repeat
    $(ids[i]).show(time, function(){
        i++;
        cycleShowHide(i);
    }
}

cycleShowHide(0,ids,time);

这是

我使用的css是：

.trip {
    opacity:0;
    background:red;
    height:100px;
    width:100px;
}

---

看到这里了吗？你的意思是你需要“旋转木马”？请先尝试自己编写代码，并在stuck55“最佳”时在这里发布尝试旋转木马插件：-其中肯定有一个插件可以完全满足您的要求…有没有办法在它开始淡出之前设置一个时间长度？…这个时间长度可以是一个变量-例如，如果div包含一个视频，它可以播放到结束，然后淡出。@otu Gu是的，您可以使用

delay

方法

var d=1000$元素均衡（i%l）.延迟（d）.衰减（700，开始）如果是视频，你可以在它的
结束
事件中调用该函数。这太棒了，谢谢。
function name_of_the_function() {
    $('.trip').each(function (index) { //for each element with class 'trip'
        $(this).delay(index * 1000).animate({ //delay 1000 ms which is the duration of the animation
            opacity: 1 //animate the opacity from 0 to 1
        }, {
            duration: 1000, //duration
            complete: function () { //when the animation is finished
                $(this).css({
                    opacity: 0 //turn the opacity from 1 to 0 without animation
                });
                if (index == 2) { //if the index == 2 which means we are in the last element in this case as we have 3 elements (0,1,2)
                    name_of_the_function(); //go back to the function
                }
            }
        });

    });
}

name_of_the_function(); //call the function at first

.trip {
    opacity:0;
    background:red;
    height:100px;
    width:100px;
}