jQuery - 从头开始​​的无尽轮播 - 下一个和上一个箭头表现得很奇怪

Question

我正在尝试为网站创建内容滑块。滑块画布区域一次只能显示3个项目，而可能有4个或更多项目。

---

请参阅JSFiddle：http://jsfiddle.net/qDUVw/

（您需要将显示部分扩展至至少1000px）

---

在我看来，它的工作方式就是这个....

让前3个项目可见。所有剩余的项目将被隐藏（由于溢出），在前3个（可见）项目的右侧。

当用户点击“下一步”时，我将向右移动所有项目338像素（各个项目的宽度）。动画完成后，我将找到第一个项目（现在在屏幕左侧），并将其移动到最后。我与.animate()以及.appendTo同时执行此操作。这确保了它在DOM结构的最后和结尾都是可见的。

当用户点击“上一个”时，我之前抓住最后一个项目，并将其移至第一个位置（同时使用.animate()和prependTo()）然后执行右侧所有项目的动画，因此新的第一项在动画之前就位。

...无论其

当您单击下一次时，它似乎工作正常.. 如果你重新加载并点击prev几次..它也可以正常工作.. 当您单击两个按钮的组合时，奇怪的事情开始发生，我不知道为什么。这些物品似乎正在转移到错误的位置。

我很难在这里找到问题。任何建议都会非常感激!!

CSS

body{background:#000;}
#poster_holder{
    margin-top:5px;
    overflow:hidden;
    position:relative;
    height: 500px;
    width:1000px;
}
#poster_holder #shade_left{
    width:49px;
    height:510px;
    top:0;
    left:0;
    position:absolute;
    background:url(http://s10.postimg.org/km0bl8let/shade_left.png?noCache=1373557653) repeat-y;
    z-index:990;
    cursor:pointer;
}


#poster_holder #shade_right{
    width:49px;
    height:510px;
    top:0;
    right:0;
    position:absolute;
    background:url(http://s10.postimg.org/d4r460vvp/shade_right.png?noCache=1373557653) repeat-y;
    z-index:990;
    cursor:pointer;
}
#poster_holder #shade_left .arrow,
#poster_holder #shade_right .arrow{
    margin-top: 200px;
    text-align:center;
    color:#fff;
}

#poster_holder #shade_left:hover .arrow,
#poster_holder #shade_right:hover .arrow{

}    
#poster_slider{
    width:1400px;
    height:500px;
    position:absolute;
    z-index:900;
    overflow:hidden;
}    
#poster_holder .item{
    height:500px;
    width:323px;
    position:absolute;
    top:0;
    cursor:pointer;

}
#poster_holder .item:last-child{
    margin-right:0px !important;        
}

JS

$('#shade_right').click(function(e){  //NEXT
    $('#poster_holder .item').animate(
        {left: '-=338'},
        function(){
            var i = $('#poster_holder .item:first');
            var x = $('#poster_holder .item:last').position().left + 338;
            i.animate({'left':x+'px'},1).appendTo('#poster_slider');                
        }
    );                 
});
$('#shade_left').click(function(e){   //PREV
    var i = $('#poster_holder .item:last');
    i.prependTo('#poster_slider').animate({'left':'-338px'},1);
    $('#poster_holder .item').animate({
        left: '+=338'
    });
});

HTML

<div id="poster_holder">
    <div id="poster_slider">
         <div class="item" id="item-1" style="left:0px;background:#ff0;"></div> 
         <div class="item" id="item-2" style="left:338px;background:#0ff;"></div>
         <div class="item" id="item-3" style="left:676px;background:#f0f;"></div>
         <div class="item" id="item-4" style="left:1014px;background:#00f;"></div>
    </div>

    <!-- Black Gradient Left & Prev Button -->
    <div id="shade_left"><div class="arrow"><img src="http://s11.postimg.org/5ttem5r0f/arrow_prev.png?noCache=1373557626" /></div></div>
    <!-- Black Gradient Right & Next Button -->
    <div id="shade_right"><div class="arrow"><img src="http://s21.postimg.org/bdyks7rwj/arrow_next.png?noCache=1373557551" /></div></div>    

</div>

Answer 1

我找到了罪魁祸首！点击next时，我的回调被调用了4次 - 每个动画项目一次。我必须将next程序更改为此，以确保它最后只调用一次。

    $('#shade_right').click(function(e){  //NEXT
        $('.posterItem')
            .animate({left: '-=338'})
            .promise()
            .done(function(){
                var firstItem = $('.posterItem:first');
                var pos = $('.posterItem:last').position().left + 338;
                firstItem.animate({'left':pos+'px'},1).appendTo('#poster_slider');                
            })                 
    });