这个轮播代码不是我自己所写，是偶然游览一个简友的主页看到的，今天刚看了事件，决定来逐行分析一下这个代码。首先，移动端与电脑端不同的是移动端只能通过触摸和手势来发生行为，所以我们要用到js中的与触摸操作有关的新事件。其实我们轮播的原理和以前相同，都是通过改变元素的位置来控制图片的出现，但让我们不是很上手的，是那些用于跟踪触摸的属性。
下面，我简单介绍一下与触摸相关的知识
触摸事件
touchstart：当手指触摸屏幕时触发，一只手指放在屏幕上也会触发
touchmove：当手指在屏幕上滑动时连续触发。在这个事件发生期间可以用preventDefault()可以阻止滚动。
touchend：手指从屏幕移开时触发。
touchcancel：当系统停止跟踪触发时触发。
上面这几个事件都会冒泡，也都可以取消。
属性
touches:表示当前跟踪的触摸操作的Touch对象的数组
targetTouches:特定于事件目标的Touch对象的数组。（简单点可以理解为手指触摸屏幕的位置）
changeTouches表示自上次触摸以来发生了什么改变的touch对象的数组。（手指离开的位置）
每个touch对象包括下列属性
clientX:触摸目标在视口中的x坐标
clientY:触摸目标在视口中的y坐标
identifier:标识触摸的唯一ID
pageX:触摸目标在页面中的x坐标
pageY:触摸目标在页面中的y坐标
screenX:触摸目标在页面中的x坐标
screenY:触摸目标在页面中的y坐标
target:触摸的dom节点目标
代码如下
<!DOCTYPE html> <html> <head> <title>移动端轮播</title> <style type="text/css"> * { margin: 0; padding: 0; } #box { width: 980px; overflow: hidden; position: relative; margin: 0 auto; } #box ul { width: 4900px; height: 100px; position: relative; transform: translateX(-980px); } #box ul li{ width: 980px; height: 100px; float: left; list-style-type: none; text-align: center; color: #fff; line-height: 100px; font-size: 30px; } </style> <script type="text/javascript"> window.onload = function() { var box = document.getElementById('box'); var oUl = document.getElementsByTagName('ul')[0]; var aLi = oUl.children;//这样就可以把所有li标签获取到了 var iNow = 1; var x = -iNow*aLi[0].offsetWidth;//li标签的位置 var bReady = true; oUl.addEventListener('touchstart',function(ev){ //当手指触摸屏幕的时候触发事件，让li的位置随手指滑动而改变 if(bReady == false){return;} bReady = false; var downX = ev.targetTouches[0].pageX; //记录触摸位置 var disX = downX - x;//下一个li要移动到的位置 function fnMove(ev) { x = downX-disX; oUl.style.transform = 'translate3d('+x+'px,0,0)'; } function fnEnd(ev){ var upX = ev.changedTouches[0].pageX;//离开的位置 if(Math.abs(upX - downX)>50){ //左边移动 if(upX - downX<0){ iNow++; if(iNow==aLi.length){iNow=aLi.length-1;} }else{ //右边移动 iNow--; if(iNow==-1){iNow=0;} } } x = -iNow*aLi[0].offsetWidth; oUl.style.transform = 'translate3d('+x+'px,0,0)'; oUl.style.transition = '200ms all ease'; function tEnd(){ if(iNow==4){ iNow=1; } if(iNow==0){iNow=3;} oUl.style.transition = 'none' x = -iNow*aLi[0].offsetWidth; oUl.style.transform = 'translate3d('+x+'px,0,0)'; bReady = true; } oUl.addEventListener('transitionend',tEnd,false); //释放内存 document.removeEventListener('touchend',fnEnd,false); document.removeEventListener('touchmove',fnMove,false); } document.addEventListener('touchmove',fnMove,false); document.addEventListener('touchend',fnEnd,false); //阻止默认事件 ev.preventDefault(); },false); } </script> </head> <body> <div> <ul> <li>3</li> <li>1</li> <li>2</li> <li>3</li> <li>1</li> </ul> </div> </body> </html>