jquery - 需要在 ul 侧识别一个居中的 li

Question

我正在使用下面的代码在移动 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>

Answer 1

试试这个：

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);
}