Question

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

我有3个旋转div并希望div1显示2秒，然后div2显示2秒，然后div3显示2秒，然后整个周期从头开始。一次一个div而另外两个隐藏。我也想摆脱点击以启动该功能，但是一旦我访问该页面就开始循环。

我基本上是从以下帖子中获取代码。我完成了所有工作 auto hide div after 2 seconds

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

此外，此论坛上的人们想要有趣且具有挑战性的问题，而不是来自学校的作业=）

2秒后自动隐藏并显示div

1 个答案: