0

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

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

（您需要将显示部分扩大到至少 1000 像素）

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

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

当用户单击“下一步”时，我会将所有项目向左设置 338 像素（单个项目的宽度）。动画完成后，我将找到第一个项目（现在位于屏幕外左侧），并将其移动到最后。我正在这样.animate()做.appendTo。这确保了它在最后以及 DOM 结构的末尾是可见的。

当使用单击“上一个”时，我在任何东西抓住最后一个项目之前，并将其移动到第一个位置（使用.animate()和prependTo()），然后向右执行所有项目的动画，因此新的第一个项目在动画。

然而...

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

我很难在这里找到问题。任何建议将不胜感激！！

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>
4

1 回答 1

0

我找到了罪魁祸首！单击时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');                
            })                 
    });
于 2013-07-13T11:24:42.790 回答