0

Webサイトのモバイルバージョンを作成していますが、タッチジェスチャで機能させるためのリストがあります（YahooのモバイルバージョンのWebサイトなど）。私はjQueryにスワイププラグインを使用していて、すべてが正常に機能しますが、問題はニュースリストを無限にしたいということであり、それをどのように行うかについての単一のアイデアがありません。

問題は、最初のアイテムを右にスワイプすると空白の場所ができて最初のアイテムに戻れないことです。これは、最後のアイテムを左にスワイプしたときにも発生します。

私のリストは次のようなものです。

<div class="newswrapper">
    <ul>
        <li>
            <a>Title 1</a>
            <div class="image">
                <img src="dummyurl1.jpg" />
            </div>
        </li>
        <li>
            <a>Title 2</a>
            <div class="image">
                <img src="dummyurl2.jpg" />
            </div>
        </li>
        <li>
            <a>Title 3</a>
            <div class="image">
                <img src="dummyurl3.jpg" />
            </div>
        </li>
    </ul>
<div>

私のjqueryコードは次のとおりです。

$(".newswrapper ul li").swipe({
    var newsWidth = $('.newswrapper ul li:first').width();
    swipe:function(event, direction, distance, duration, fingerCount) {
        if (direction == 'left') {
            $('.newswrapper ul').animate({left : '-=' + newsWidth}, 500);
            });
        } else if (direction == 'right') {
            $('.newswrapper ul').animate({left : '+=' + newsWidth}, 500);
        }
    }
});

助言がありますか？

4

2 に答える 2

0

width私のアプローチは、あなたが1つ以上スライドしたかどうかを確認することですli。もしそうなら、リストから最初のものを削除し、それを後ろに置き、の幅でのleftをリセットしますulli

他の方向にも同じことができます。

于 2012-10-11T15:56:49.480 に答える
0

touchSwipe jQueryプラグインの使用経験は成功しませんでした。デスクトップブラウザーではうまく機能しますが、モバイルブラウザーではバグが多すぎます。

何日も検索した後、ブラウザーとモバイルブラウザー（androidとiDevicesの両方）の両方で動作するiOSSliderを見つけました。これは、私が探していたものです。

于 2012-11-24T14:18:02.317 に答える