5

ここに簡単なフィドルを設定しました。私が望むのは、左または右に無限にスクロールし (カルーセル スタイル)、要素を繰り返すだけです (つまり、右端から「落ちて」左に再表示され、その逆も同様です)。スクロールのどこにいるのかをキャプチャできますが、その後の最善の方法はわかりません。要素を動的に移動しようとするルートをたどる前に、非常に単純なトリックがあるように思えます。

CSS

#main {
    overflow-x:scroll;
    overflow-y:hidden;
    white-space:nowrap;
}

HTML

<div id="main">
    <img src="http://dummyimage.com/150x100/aaa/00f">
    <img src="http://dummyimage.com/150x100/000/fff">
    <img src="http://dummyimage.com/150x100/000/fff">
    <img src="http://dummyimage.com/150x100/000/fff">
    <img src="http://dummyimage.com/150x100/000/fff">
    <img src="http://dummyimage.com/150x100/000/fff">
    <img src="http://dummyimage.com/150x100/000/fff">
    <img src="http://dummyimage.com/150x100/000/fff">
    <img src="http://dummyimage.com/150x100/000/fff">
    <img src="http://dummyimage.com/150x100/ccc/f00">
</div>

JS

$('#main').scroll(function (event) {
    var width = $(this)[0].scrollWidth - $(this).width();
    console.log('location: ' + $(this).scrollLeft() + ' out of ' + width);
});​
4

1 に答える 1

5

これは、スクロールバーとすべてでかなりうまく機能します：

$('#main').scroll(function (event) {
    var factor = this.scrollLeft / (this.scrollWidth - $(this).width());
    if(factor < 0.2) {
        var move = $(this.lastChild);
        move.remove();
        $(this).prepend(move);
        this.scrollLeft += move.width();
    } else if(factor > 0.8) {
        var move = $(this.firstChild);
        move.remove();
        $(this).append(move);
        this.scrollLeft -= move.width();
    }
});

jsFiddle: http://jsfiddle.net/ZgEZN/10/

スクロールバーの左端または右端の 20% までスクロールすると、スクロールバーの動作がおかしくなりますが、大幅な不具合は発生しません。(スクロールバーをその領域にドラッグすると、スクロールバーが解放されるか、より適切な場所に移動されるまで、カルーセルが急速に回転します。別の方法でその領域にスクロールすると、スクロールバーが中央に戻ります。)

于 2012-05-30T07:57:13.713 に答える