移动端京东添加触摸事件轮播图

/*轮播图*/
function  bannerEffect(){
    /*1.设置修改轮播图的页面结构
    * a.在开始位置添加原始的最后一张图片
    * b.在结束位置添加原始的第一张图片*/
    /*1.1.获取轮播图结构*/
    var banner=document.querySelector(".jd_banner");
    /*1.2.获取图片容器*/
    var imgBox=banner.querySelector("ul:first-of-type");
    /*1.3.获取原始的第一张图片*/
    var first=imgBox.querySelector("li:first-of-type");
    /*1.4.获取原始的最后一张图片*/
    var last=imgBox.querySelector("li:last-of-type");
    /*1.5.在首尾插入两张图片   cloneNode:复制一个dom元素*/
    imgBox.appendChild(first.cloneNode(true));
    /*insertBefore(需要插入的dom元素，位置)*/
    imgBox.insertBefore(last.cloneNode(true),imgBox.firstChild);

    /*2.设置对应的样式*/
    /*2.1获取所有li元素*/
    var lis=imgBox.querySelectorAll("li");
    /*2.2 获取li元素的数量*/
    var count=lis.length;
    /*2.3.获取banner的宽度*/
    var bannerWidth=banner.offsetWidth;
    /*2.4 设置图片盒子的宽度*/
    imgBox.style.width=count*bannerWidth+"px";
    /*2.5 设置每一个li(图片)元素的宽度*/
    for(var i=0;i<lis.length;i++){
        lis[i].style.width=bannerWidth+"px";
    }

    /*定义图片索引:图片已经有一个宽度的默认偏移*/
    var index=1;

    /*3.设置默认的偏移*/
    imgBox.style.left=-bannerWidth+"px";

    /*4.当屏幕变化的时候，重新计算宽度*/
    window.onresize=function(){
        /*4.1.获取banner的宽度,覆盖全局的宽度值*/
        bannerWidth=banner.offsetWidth;
        /*4.2 设置图片盒子的宽度*/
        imgBox.style.width=count*bannerWidth+"px";
        /*4.3设置每一个li(图片)元素的宽度*/
        for(var i=0;i<lis.length;i++){
            lis[i].style.width=bannerWidth+"px";
        }
        /*4.4重新设置定位值*/
        imgBox.style.left=-index*bannerWidth+"px";
    }
	
    var timerId;
    /*5.实现自动轮播*/
    var startTime=function(){
        timerId=setInterval(function(){
            /*5.1 变换索引*/
            index++;
            /*5.2.添加过渡效果*/
            imgBox.style.transition="left 0.5s ease-in-out";
            /*5.3 设置偏移*/
            imgBox.style.left=(-index*bannerWidth)+"px";
            /*5.4 判断是否到最后一张，如果是则*/
            setTimeout(function(){
                if(index==count-1){
                    console.log(index);
                    index=1;
                    /*如果一个元素的某个属性之前添加过过渡效果，那么过渡属性会一直存在，如果不想要，则需要清除过渡效果*/
                    /*关闭过渡效果*/
                    imgBox.style.transition="none";
                    /*偏移到指定的位置*/
                    imgBox.style.left=(-index*bannerWidth)+"px";
                }
            },500);
        },2000);
    }
    startTime();

    /*6.实现手动轮播*/
    var startX,moveX,distanceX;
    /*为图片添加触摸事件--触摸开始*/
    imgBox.addEventListener("touchstart",function(e){
        /*清除定时器*/
        clearInterval(timerId);
        /*获取当前手指的起始位置*/
        startX= e.targetTouches[0].clientX;
    });
	
    /*为图片添加触摸事件--滑动过程*/
    imgBox.addEventListener("touchmove",function(e){
        /*记录手指在滑动过程中的位置*/
        moveX= e.targetTouches[0].clientX;
        /*计算坐标的差异*/
        distanceX=moveX-startX;
        /*为了保证效果正常，将之前可能添加的过渡样式清除*/
        imgBox.style.transition="none";
        /*实现元素的偏移  left参照最原始的坐标
        * 重大细节：本次的滑动操作应该基于之前轮播图已经偏移的距离*/
        imgBox.style.left=(-index*bannerWidth + distanceX)+"px";
    });
    /*添加触摸结束事件*/
	
	
	
    /*touchend:松开手指触发*/
    imgBox.addEventListener("touchend",function(e){
        /*获取当前滑动的距离，判断距离是否超出指定的范围 100px*/
        if(Math.abs(distanceX) > 100){
            /*判断滑动的方向*/
            if(distanceX > 0){//上一张
                index--;
            }
            else{ //下一张
                index++;
            }
            /*翻页*/
            imgBox.style.transition="left 0.5s ease-in-out";
            imgBox.style.left=-index*bannerWidth+"px";
        }
        else if(Math.abs(distanceX) > 0){ //得保证用户确实进行过滑动操作
            /*回弹*/
            imgBox.style.transition="left 0.5s ease-in-out";
            imgBox.style.left=-index*bannerWidth+"px";
        }
        //重新开启定时器
        startTime();
    });
	
	

    /*webkitTransitionEnd:可以监听当前元素的过渡效果执行完毕，当一个元素的过渡效果执行完毕的时候，会触发这个事件*/
    imgBox.addEventListener("webkitTransitionEnd",function(){
        /*如果到了最后一张(count-1)，回到索引1*/
        /*如果到了第一张(0)，回到索引count-2*/
        if(index==count-1){
            index=1;
            /*清除过渡*/
            imgBox.style.transition="none";
            /*设置偏移*/
            imgBox.style.left=-index*bannerWidth+"px";
        }
        else if(index==0){
            index=count-2;
            /*清除过渡*/
            imgBox.style.transition="none";
            /*设置偏移*/
            imgBox.style.left=-index*bannerWidth+"px";
        }
    });
}