jquery 在wap端图片列表左右滑动 touch

    $(".imgList").find("li").each(function(item){
        $(this).on("touchstart", function(e) {
            // 判断默认行为是否可以被禁用
            if (e.cancelable) {
                // 判断默认行为是否已经被禁用
                if (!e.defaultPrevented) {
                    e.preventDefault();
                }
            }
            startX = e.originalEvent.changedTouches[0].pageX,
            startY = e.originalEvent.changedTouches[0].pageY;
        });
        $(this).on("touchend", function(e) {
            // 判断默认行为是否可以被禁用
            if (e.cancelable) {
                // 判断默认行为是否已经被禁用
                if (!e.defaultPrevented) {
                    e.preventDefault();
                }
            }
            moveEndX = e.originalEvent.changedTouches[0].pageX,
            moveEndY = e.originalEvent.changedTouches[0].pageY,
            X = moveEndX - startX,
            Y = moveEndY - startY;
            //左滑
            if ( X > 0 ) {
                if(item > 0) {
                    clearInterval(autoChange);
                    changeTo(item-1);
                    curIndex = item-1;
                    autoChangeAgain();
                }
                console.log('左滑');
            }
            //右滑
            else if ( X < 0 ) {
                console.log(item);
                console.log('右滑');
                if(item < 3) {
                    clearInterval(autoChange);
                    changeTo(item+1);
                    curIndex = item+1;
                    autoChangeAgain();
                }
            }
            //下滑
            else if ( Y > 0) {
                console.log('下滑');
            }
            //上滑
            else if ( Y < 0 ) {
                console.log('上滑');
            }
            //单击
            else{
                console.log('单击');
            }
        });
    });

  

posted @ 2020-07-06 10:26  秋风2016  阅读(301)  评论(0编辑  收藏  举报