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('单击');
                }
            });
        });
    

      

  • 相关阅读:
    JAVA语法之小结
    JAVA之经典Student问题1
    Android之动画1
    Android之屏幕测试
    Android之点击切换图片
    Android之标签选项卡
    Android简单计算器
    Javascript之相册拖动管理
    Javascript之改变盒子颜色
    CSS之照片翻转
  • 原文地址:https://www.cnblogs.com/lml2017/p/13253490.html
Copyright © 2011-2022 走看看