1

モバイルjqueryのリスト要素を左右にスワイプするために以下のコードを使用しています。現在スワイプに整列されているliを識別する必要があります。コードは正常に機能しています。スワイプされたliを識別する必要があるだけです。

<script>
    $(function() {
        var item = $('.pan li');
        var itemWidth = item.width();
        var itemLenght = item.length;
        var scrollerWidth = itemWidth * itemLenght;
        scrollLimt = itemWidth;
        item.click(function(){
            item.removeClass('active');
            $(this).addClass('active');
        });

    var position = 0;
    function next() {
        position -= scrollLimt;
        if (position <= -scrollerWidth)
            position = 0;
        update();

    }

    function prev() {
        position += scrollLimt;
        if (position > 0)
            position = 0;
        update();
    }

    function update() {
        var pan = document.getElementById("pan");
        pan.style.OTransform = "translateX(" + position + "px)";
        pan.style.MozTransform = "translateX(" + position + "px)";
        pan.style.WebkitTransform = "translateX(" + position + "px)";
    }
        $('#pan').bind("swipeleft", next);
        $('#pan').bind("swiperight", prev);

        $("img").bind("dragstart", function(ev) { ev.preventDefault(); });
    });
</script>
4

1 に答える 1

0

これを試して：

function update(isSwipedLeft) {
    var pan = document.getElementById("pan");
    var swipedLi = isSwipedLeft ? $(pan).prev('li') : $(pan).next('li');//this is your required li.
    pan.style.OTransform = "translateX(" + position + "px)";
    pan.style.MozTransform = "translateX(" + position + "px)";
    pan.style.WebkitTransform = "translateX(" + position + "px)";
}

そして、この関数を次のように呼び出します。

function next() {
    position -= scrollLimt;
    if (position <= -scrollerWidth)
        position = 0;
    update(false);

}

function prev() {
    position += scrollLimt;
    if (position > 0)
        position = 0;
    update(true);
}
于 2013-02-19T10:48:33.677 に答える