1

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

我有 3 个旋转 div，希望 div1 显示 2 秒，然后 div2 显示 2 秒，然后 div3 显示 2 秒，然后整个循环从头开始。一次一个 div，而其他 2 个被隐藏。我也想摆脱单击以启动该功能，但只要我访问该页面，循环就开始了。

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

4

1 回答 1

0

使用 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。如果你不知道它是如何工作的，那么使用它是不聪明的。至少要学习基础知识。

此外，这个论坛上的人想要有趣和具有挑战性的问题，而不是学校的作业=）

于 2012-11-02T00:55:03.323 回答