实现移动端轮播图

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;
	})


}