首页 > Web开发 > 详细

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

时间:2020-07-06 10:39:00      阅读:63      评论:0      收藏:0      [点我收藏+]
    $(".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(‘单击‘);
            }
        });
    });

  

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

原文:https://www.cnblogs.com/lml2017/p/13253490.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!