zoukankan      html  css  js  c++  java
  • 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('单击');
                }
            });
        });
    

      

  • 相关阅读:
    杂记-2
    2019CSP-S游记
    csp2020
    特征根法小记
    csp模拟赛低级错误及反思
    备份
    黑科技——树剖两次dfs转一次dfs!
    输出天干地支
    蓝桥0531-输出Y
    蓝桥0615-判断四位数字前后两组是否相等
  • 原文地址:https://www.cnblogs.com/lml2017/p/13253490.html
Copyright © 2011-2022 走看看