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

Question

<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").

我在调试的时候改了代码，只用了2div秒就滑动了，也出现了类似的错误。这次，两个 div 只正确滑动了一次（第一次加载页面时）。第一个幻灯片放映成功后，显示了2个div中的第一个，但是没有显示第2个div；数组中的第 3 个 div 是。 O.o http://jsfiddle.net/czt0mycw/1/

Answer 1

您需要在间隔的下一次迭代中重置 divs。变化：

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 的动画后立即重置 divs。相反，您想在第一个 div.

再次开始动画之前立即重置 divs

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

Why is my jquery div slider skipping some of the divs?

html

javascript

jquery

image-gallery

jquery-slider