8

水平線で無限に浮かぶ一連のdivがあります。私は固定幅のdivコンテナを持っています、overflow：hidden。最終的には、左右のdiv /ボタンを押してアイテムをスクロールしたいと思います（スクロールバーを使用する場合とは異なります）。

.animate（）を機能させるのに問題があります。クリックするたびに、リスト内のアイテムを移動します。

これは、同じ方法でスクロールできるアマゾンの「このアイテムを購入した顧客も購入した」リストと同様に機能するはずです。.mousedownを使用して、押したまま動かしてみたくなりましたが（実際のスクロールと同様）、最初にこの簡単なアプローチを実行したいと思います。

フィドルとコードは次のとおりです。

http://jsfiddle.net/stfzy/16/

HTML：

<div id="container">
<div id="arrowL">
</div>
<div id="arrowR">
</div>
<div id="list-container">
    <div class='list'>
        <div class='item'>
        </div>
        <div class='item'>
        </div>
        <div class='item'>
        </div>
        <div class="item">
        </div>
    </div>
</div>

CSS：

 #container{
width:340px;
    height:50px;
}

#list-container {
overflow:hidden;    
width: 300px;  
float:left;    
}

.list{
    background:grey;
min-width:700px;
    float:left;
}


#arrowR{
background:yellow;
    width:20px;
    height:50px;
    float:right;
    cursor:pointer;
}


#arrowL{
background:yellow;
    width:20px;
    height:50px;
    float:left;
    cursor:pointer;
}

.item{
    background:green;
width:140px;
    height:40px;
    margin:5px;
    float:left;
}

jQuery

$(document).ready(function() {

    $('div#arrowR').click(function(){

        $('div.item').animate({'left':'-=300px'});

    });

    $('div#arrowR').click(function(){

        $('div.item').animate({'left':'+=300px'});

    });

});

ありとあらゆる助けに感謝します。ありがとう！

4

1 に答える 1

19

に追加position:relative、.item次のように：

.item{
    background:green;
    width:140px;
    height:40px;
    margin:5px;
    float:left;
    position:relative; /* Put me here! */
}

実例： http： //jsfiddle.net/mattblancarte/stfzy/21/

セットアップにはさらにいくつかのバグがありますが、これで問題が解決するはずです。:)

編集：：

リストがどちらの方向にもスライドしすぎるバグを解決するための簡単な解決策は次のとおりです。

$(document).ready(function() {

    var $item = $('div.item'), //Cache your DOM selector
        visible = 2, //Set the number of items that will be visible
        index = 0, //Starting index
        endIndex = ( $item.length / visible ) - 1; //End index (NOTE:: Requires visible to be a factor of $item.length... You can improve this by rounding...)

    $('div#arrowR').click(function(){
        if(index < endIndex ){
          index++;
          $item.animate({'left':'-=300px'});
        }
    });

    $('div#arrowL').click(function(){
        if(index > 0){
          index--;            
          $item.animate({'left':'+=300px'});
        }
    });

});
于 2012-11-18T07:01:17.587 に答える