0

Web サイトのコンテンツ スライダーを作成しようとしています。スライダー キャンバス領域には、一度に 3 つのアイテムしか表示できませんが、4 つ以上のアイテムがある場合もあります。

JSFiddle を参照してください: http://jsfiddle.net/qDUVw/

(ディスプレイ セクションを少なくとも 1000px に広げます)

私の考えでは、それが機能する方法はこれです....

最初の 3 つの項目を表示します。残りのすべての項目は (オーバーフローのため) 非表示になり、最初の 3 つの (表示されている) 項目の右側に表示されなくなります。

ユーザーが [次へ] をクリックすると、すべてのアイテムが左に 338 ピクセル (個々のアイテムの幅) アニメーション化されます。アニメーションが完了したら、最初の項目 (現在は画面外の左側) を見つけて、最後に移動します。と の両方でこれを行ってい.animate()ます.appendTo。これにより、DOM 構造の最後だけでなく、最後にも表示されます。

使用者が「前へ」をクリックすると、最後のアイテムをつかんで最初の位置に移動し（ と の両方を使用.animate()）prependTo()、すべてのアイテムのアニメーションを右に実行する前に、新しい最初のアイテムがアニメーション。

でも...

次へを数回クリックすると、問題なく動作するようです..リロードして前へを数回クリックすると..問題なく動作します..2つのボタンの組み合わせをクリックすると、奇妙なことが起こり始め、私は理由がわからない。アイテムが順不同で間違った場所に移動しているようです。

ここで問題を見つけるのに非常に苦労しています。どんなアドバイスでも大歓迎です!!

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 回呼び出されました。アニメーション化されたアイテムごとに 1 回です。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 に答える