web移动端touch&手势&轮播图

触摸事件touch

绑定事件

obj.addEventListener('touchstart',function(){});

/*
touchstart(手指触摸屏幕时触发)
touchmove(手指在屏幕滑动时)
touchend(手指离开屏幕时)
touchcancel(被迫终止滑动时，如来电，弹消息)
*/

事件对象

touchList//触摸点（和屏幕接触点的）的集合
changedTouches // 改变后的触摸点集合(每个事件都会记录)
targetTouches  //当前元素的触发点集合(离开屏幕时不会记录触摸点)
touches  //页面上所有触发点集合（同上）

e.touches[0] //第一个触摸点

clientX、pageX、screenX的区别

clientX //基于浏览器窗口（视口）
pageX //基于页面（视口）
screenX //基于屏幕
        box.addEventListener('touchstart',function (e) {
            console.log("start");
            console.log(e);
            console.log(e.touches[0].clientX+"---->"+e.touches[0].clientY);
            console.log(e.touches[0].pageX+"--->"+e.touches[0].pageY);
            console.log(e.touches[0].screenX+"--->"+e.touches[0].screenY);
        })

移动端的手势事件（swipe,swipeLeft,swipeRight,swipeUp,swipeDown）

<script>
    window.onload=function () {
        //理解移动端的手势事件
        //swipe  swipeLeft  swipeRight  swipeUp  swipeDown
        //左滑和右滑手势怎么实现

        var bindSwipeEvent=function (dom,leftCallback,rightCallback) {
            //手势的条件
            //1、必须滑动过
            //2、滑动的距离50px
            var isMove=false;
            var startX=0;
            var distanceX=0;
            dom.addEventListener('touchstart',function (e) {
                startX=e.touches[0].clientX;
            });
            dom.addEventListener('touchmove',function (e) {
                isMove=true;
                var moveX=e.touches[0].clientX;
                distanceX=moveX-startX;
            });
            dom.addEventListener('touchend',function (e) {
                //滑动结束
                if(isMove && Math.abs(distanceX)>50){
                    if(distanceX>0){
                        rightCallback&&rightCallback.call(this,e);
                    }else{
                        leftCallback&& leftCallback.call(this,e);
                    }
                }
            });

        };
        bindSwipeEvent(document.getElementsByTagName('div')[0],function (e) {
            console.log(this);
            console.log('左滑手势');
        },function (e) {
            console.log(this);
            console.log('右滑手势');
        });
    };
</script>

轮播图

需求分析

1、自动轮播且无缝（轮播8张图，ul:first-child中共10张图）   定时器，过渡transition
2、滑动效果   利用touch事件完成
3、滑动结束的时候滑动距离distanceX不超过屏幕的1/3——吸附回去  过渡
4、滑动距离超过屏幕的1/3——切换（上一张index--，下一张index++） 根据滑动的方向(distanceX>0  正)

准备工作

    //轮播图
    var banner=document.querySelector('.banner');

    //屏幕宽度
    var width=banner.offsetWidth;

    //图片容器
    var imageBox=banner.querySelector('ul:first-child');


    //点容器
    var pointBox=banner.querySelector('ul:last-child');

    //所有的点
    var points=pointBox.querySelectorAll('li');

    //加过渡
    var addTransition=function () {
        imageBox.style.transition='all 0.2s';
        imageBox.style.webkitTransition='all 0.2s';
    };

    //清过渡
    var removeTransition=function () {
        imageBox.style.transition='none';
        imageBox.style.webkitTransition='none';
    };

    //做位移
    var setTranslateX=function (translateX) {
        imageBox.style.transform='translateX('+translateX+'px)';
        imageBox.style.webkitTransform='translateX('+translateX+'px)';
    };

自动无缝轮播

var index=1;//当前显示第二张图
var timer=setInterval(function () {
    index++;
    //加过渡
    addTransition();

    //做位移
    setTranslateX(-index*width);
},1000);

//实现无缝
imageBox.addEventListener('transitionend',function () {
        //自动滚动的无缝
        if(index>=9){
            index=1;
            //瞬间定位
            //清过渡
            removeTransition();
            setTranslateX(-index*width);
        }
        //滑动的无缝——向右
        else if(index<=0){
            index=8;
            removeTransition();
            setTranslateX(-index*width);
        }

        /*根据索引设置点*/
        setPoint();
});

//设置点
var setPoint=function () {
   //清除样式
   for(var i=0;i<points.length;i++){
       var obj=points[i];
       obj.classList.remove('now');
   }
   //给对应点加上样式
   points[index-1].classList.add('now');
};

touchstart(起始点startX)

var startX=0;
var distanceX=0;
var isMove=false;
imageBox.addEventListener('touchstart',function (e) {
   //清除定时器
   clearInterval(timer);

   //记录起始位置的X坐标
   startX=e.touches[0].clientX;
});

touchmove(计算位移distanceX—>imageBox移动距离-index*width+distanceX)

imageBox.addEventListener('touchmove',function (e) {
    //记录滑动过程的x坐标
    var moveX=e.touches[0].clientX;

    //计算位移，有正负方向
    distanceX=moveX-startX;

    //计算目标元素的位移  不用管正负
    //元素将要的定位=当前定位+手指移动的距离
    var translateX=-index*width+distanceX;

    //滑动-->元素随着手指的滑动做位置的改变
    //清过渡
    removeTransition();
    setTranslateX(translateX);
    isMove=true;
});

touchend(比较手指滑动距离Math.abs(distanceX)和width/3—>做吸附|切换)

 imageBox.addEventListener('touchend',function (e) {
     //要使用移动的距离
     if(isMove){
         if(Math.abs(distanceX)<width/3){
             //吸附
             addTransition();
             setTranslateX(-index*width);
         }
         else{
             //切换
             //左滑动  下一张
             if(distanceX<0)
                 index++;
             //右滑动   上一张
             if(distanceX>0)
                 index--;

             addTransition();
             setTranslateX(-index*width);
         }
     }

     //重置  防止污染第二次滑动
     startX=0;
     distanceX=0;
     isMove=false;
     clearInterval(timer);
     
     //恢复自动轮播
     timer=setInterval(function () {
         index++;
         //加过渡
         addTransition();

         //做位移
         setTranslateX(-index*width);
     },1000);

 });

注意事项

1、兼容（webkit）
2、index的临界值
3、清除定时器、设置定时器
4、重置变量
5、优化（isMove）