Question

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（＆＃34; hold_divs＆＃34;）。

当我调试时，我将代码更改为仅滑动2个div，并发生类似的错误。这次，两个div只能正确滑动一次（首次加载页面时）。第一张幻灯片成功完成后，它显示了2个div中的第一个，但是没有显示第二个div。数组中的第3个div是。 O.o http://jsfiddle.net/czt0mycw/1/

Answer 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。相反，您希望在第一个div再次开始动画之前立即重置div。

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

1 个答案: