为什么我的jquery div滑块跳过了一些div

http://jsfiddle.net/czt0mycw/

<body>
<div id="hold_divs">hold divs
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
</div>
</body>

这是我第一次构建jquery滑块，它表现出了最奇怪的行为。当页面第一次加载时，它成功地(自动(将内容(我的4个div堆叠在一起(向右滑动。但是，在完整的幻灯片放映完成后，滑块将不再显示div1(红色背景的div(。相反，它跳过(我相信这就是发生的事情(并显示父div("hold_divs"(。

当我进行调试时，我修改了代码，使其只包含2个div，并出现了类似的错误。这一次，两个div只正确滑动了一次(当页面第一次加载时(。第一张幻灯片成功完成后，它显示了2个div中的第一个，但中的第二个div没有显示；数组中的第三个div是。O.Ohttp://jsfiddle.net/czt0mycw/1/

您需要在间隔的下一次迭代中重置div。更改：

setInterval(function()
    {
    var divs=[$("#div4"),$("#div3"),$("#div2"),$("#div1")];
    var width=divs[x].width();
    divs[x].stop().animate({right:"100%"},"slow");
    x+=1;
    if(x==4)
    {
     $("#div4,#div3,#div2,#div1").css("right",0);
        x=0;    
    } 
},3000);

至

setInterval(function()
{
    if(x==4)
    {
        $("#div4,#div3,#div2,#div1").css("right",0);
        x=0;
        return;
    } 
    var divs=[$("#div4"),$("#div3"),$("#div2"),$("#div1")];
    var width=divs[x].width();
    divs[x].stop().animate({right:"100%"},"slow");
    x+=1;
},3000);

发生的情况是，您在开始第4个div的动画后立即重置div。相反，您希望在再次开始第1个div.

的动画之前立即重置div

相关内容

最新更新

热门标签：