2秒后自动隐藏并显示Div

Question

我对这类脚本非常陌生，对任何帮助非常感谢。

我有3个旋转divs，希望Div1显示2秒钟，然后Div2显示2秒钟，然后Div3显示2秒钟，然后显示2秒钟，然后从头开始整个周期。一个div一次，而另一个则隐藏。我也想摆脱点击启动功能，但一旦我访问页面开始，请立即开始。

我基本上是从以下帖子中获取代码。我有所有工作2秒后自动隐藏div

Answer 1

使用jquery .fadein()和 .fadeout()或 .css('display','none')并使用 window.setInterval(FunctionName, 2000);

每两秒钟，您在第一个参数中输入的函数将运行。创建一个变量，以跟踪您将要显示的Div。当变量转到3时，您将其重置为1，因此该过程可以无限继续。

编辑：

样式：

div{
    width:500px;
    height:500px;
    margin-left:50px;
    border:1 px solid black;
    float:left;
    opacity:0;
}
#div3
{
    opacity:1;
}
div:nth-child(odd){
    background:#dad;
}
div:nth-child(even){
    background:#a55;
}

jQuery/js：

var Index = 1;
window.setInterval(ChangeVisibleDiv, 2000);
function ChangeVisibleDiv()
{
    var nextIndex = Index + 1;
    var prevIndex = Index - 1;
    //reset on 4, not 3 because then the 3rd div would never be faded out.
    if(Index == 4)
        nextIndex = 1;
    // opposite story here as above
    if(Index == 1)
        prevIndex = 3;
     $(("#div" + prevIndex)).css('opacity',0);
     $(("#div" + nextIndex)).css('opacity',0);
     $(("#div" + Index)).css('opacity',1);
    Index++;
    //reset on 4, not 3 because then the 3rd div would never be faded out.
    if(Index == 4)
        Index = 1;
}

html

<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>

它始于第三div，希望您不要介意，因为我懒得修复=）

不过，我真的建议您学习一些jQuery和JavaScript。如果您不知道它是如何工作的，那么使用某些东西并不聪明。至少要学习基本面。

此外，这个论坛上的人们想要有趣且充满挑战的问题，而不是学校的作业=）