实现移动端轮播图

1、移动端实现滑动切换轮播图，主要由touch（touchstart,touchmove,touchend）事件实现。在touch事件中可以通过 e.touches[0].clientX获取当前触摸点的位置，在touchend事件中没有e.touches[0].clientX值

var banner=function(){
	/*
	 *1、无缝滚动和无缝滑动
	 *2、点盒子对应改变
	 *3、可以滑动
	 *4、当滑动距离不够时 吸附回去
	 *5、当滑动距离够了时 跳转上/下一张
	*/
	var banner=document.querySelector(\'.jd_bannar\');
	var imgBox=banner.querySelector(\'ul:first-child\');
	var pointBox=banner.querySelector(\'ul:last-child\');
	var points=pointBox.querySelectorAll(\'li\');
	var width=banner.offsetWidth;


	var addTransition=function(){
		imgBox.style.transition = \'all 0.2s\';
		imgBox.style.webkitTransition=\'all 0.2s\';
	}
	var removeTransition=function(){
		imgBox.style.transition = \'none\';
		imgBox.style.webkitTransition=\'none\';
	}

	var setTranslateX=function(tx){
		imgBox.style.transform = \'translateX(\'+tx+\'px)\';
		imgBox.style.webkitTransform = \'translateX(\'+tx+\'px)\';
	}
	var index=1;
	var timer=setInterval(function(){
		index++;
		addTransition();
		setTranslateX((-index*width))
	},1000)
	//监听 transition结束之后的事件
	imgBox.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++){
			points[i].classList.remove(\'now\')
		}
		points[index-1].classList.add(\'now\')
	}
	
	var stratX=0;
	var disX=0;
	var ismove=false;
	imgBox.addEventListener(\'touchstart\',function(e){
		clearInterval(timer)
		stratX=e.touches[0].clientX;
	})
	imgBox.addEventListener(\'touchmove\',function(e){
		var moveX=e.touches[0].clientX;
		disX=moveX-stratX;
		/*计算定位*/
		var tx=-index*width+disX;
		//清除定位
		removeTransition();
		setTranslateX(tx);
		ismove=true;
	})
	imgBox.addEventListener(\'touchend\', function(e){
		/*disX确定滑动距离，判断是否吸附或者跳转*/
		if(ismove && Math.abs(disX)<(width/3)){
			addTransition();
			setTranslateX(-index*width)
		}else{
			//判断滑动方向
			if(disX>0){
				index--;
			}else{
				index++
			}
			addTransition();
			setTranslateX(-index*width)
		}
		clearInterval(timer)
		timer=setInterval(function(){
			index++;
			addTransition();
			setTranslateX((-index*width))
		},1000)
		//初始化数据
		stratX=0;
		ismove=false;
		disX=0;
	})


}