1

左ボタンと右ボタンがあるjqueryを使用して水平スクローラーを作成しました。

<div id="container">
<ol>
    <li class="a"></li>
    <li class="b"></li>
    <li class="c"></li>
    <li class="d"></li>
    <li class="e"></li>
</ol>
</div>

<button id="left">left</button>
<button id="right">right</button>

コンテナには相対的な位置付けでオーバーフローが隠されており、次のjqueryを使用して、コンテンツがビュー内またはビュー外に左または右に移動されます。

$('#left').on('click',function(){
    $('ol').css('left','-=100px');
});

$('#right').on('click',function(){
    $('ol').css('left','+=100px');
});

問題は、これらの機能が無限であり、永遠にクリックし続けることができ、画面からどんどん離れていくということです。これを制限して、表示するオブジェクトがなくなると、関数が別のことを実行できるようにします。

これを行うにはかなりの数の方法があると思いますが、私が考える方法はどれもそれほどエレガントに見えません。たとえば、コンテナのサイズと内側のアイテムの幅の合計を数え、各ボタンが押された回数を集計し、ボタンが押されるたびに一定の計算を行います。

よく説明していなければ、JSをいじくりまわしました。

理想的には、その例では、ピンク色のブロックは表示されません。

4

1 に答える 1

2

必要なのはifステートメントだけです。

$('#left').on('click',function(){
    if ($('ol').css('left') != '0px') {
         $('ol').css('left','-=100px');
    }
});


$('#right').on('click',function(){
    if ($('ol').css('left') != '300px') {
        console.log($('ol').css('left'));
         $('ol').css('left','+=100px');
    }
});

http://jsfiddle.net/kqhNr/4/

于 2013-03-06T07:11:37.710 に答える