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

【问题标题】：Why is my jquery div slider skipping some of the divs?为什么我的 jquery div 滑块跳过了一些 div？
【发布时间】：2015-07-05 10:08:13
【问题描述】：

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中的第一个，但没有显示第2个div；数组中的第三个 div 是。哦 http://jsfiddle.net/czt0mycw/1/

【问题讨论】：

标签： javascript jquery html image-gallery jquery-slider

【解决方案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。

【讨论】：

谢谢我这样做了，但是绿色的 div("div#4") 现在有问题了。它不会留在页面上。
非常感谢！：）有效。现在我只需要让它不那么突兀