需要在ul内部识别一个居中的li

时间:2013-02-19 10:39:27

标签: jquery jquery-mobile swipe

我正在使用以下代码向左滑动&右侧移动jquery中的列表元素,我需要识别当前与刷卡对齐的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>

1 个答案:

答案 0 :(得分: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);
}