分析：移动端的轮播图最主要的就是手势触摸点击，移动和移动结束的一系列的事件，利用touch相关事件实现移动端常见滑动效果和常见的手势事件 。轮播图滑动的时候通过判断触摸屏幕的开始位置与结束位置是否大于容器的三分之一（至于多少自己定），大于则下一张，小于则回到原来的位置
解析touch：
1.touch是移动端的触摸，是一组事件。
2.touchstart 当触摸屏幕的时候触发
3.touchend 当手指离开屏幕是触发
4.touchmove 手指在屏幕中来回滑动触发
5.touchcancel 被迫中止手势滑动的时候出发（来电，信息等）
具体参考网站：https://developer.mozilla.org/zh-CN/docs/Web/API/TouchEvent
以上的事件的even对象上都存在以下的属性：
名字：TouchList 触摸点（一个手指触摸就是一个触发点，和屏幕的接触点的个数）的集合
changedTouches 改变后的触摸点集合
targetTouches 当前元素的触发点集合
touches 页面上所有触发点集合
触摸点集合在每个事件触发的时候，changedTouches 每个事件都会记录，而targetTouches，touches 在离开屏幕的时候无法记录触摸点。
我们需要做的就是获取touches里面的位置属性，如下：
e.touches[0] 第一个触摸点
clientX clientY 基于浏览器窗口（视口）
pageX pageY 基于页面（视口）
screenX screenY 基于屏幕
以下为事件测试查看属性值的源码：
1 <div class="box"></div> 2 <script> 3 window.onload = function () { 4 var box = document.querySelector('.box'); 5 box.addEventListener('touchstart',function (e) { 6 console.log('start'); 7 console.log(e.touches[0].clientX,e.touches[0].clientY); 8 console.log(e.touches[0].pageX,e.touches[0].pageY); 9 console.log(e.touches[0].screenX,e.touches[0].screenY); 10 }); 11 box.addEventListener('touchmove',function (e) { 12 console.log('move'); 13 console.log(e); 14 }); 15 box.addEventListener('touchend',function (e) { 16 console.log('end'); 17 console.log(e); 18 }); 19 20 } 21 </script>
源码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>移动端轮播</title> 6 </head> 7 <body> 8 <div id="container"> 9 <div class="banner"> 10 <ul class="clearFix"> 11 <li><a href="#"><img src="images/l3.jpg" alt=""></a></li> 12 <li><a href="#"><img src="images/l1.jpg" alt=""></a></li> 13 <li><a href="#"><img src="images/l2.jpg" alt=""></a></li> 14 <li><a href="#"><img src="images/l3.jpg" alt=""></a></li> 15 <li><a href="#"><img src="images/l1.jpg" alt=""></a></li> 16 </ul> 17 <ul> 18 <li class="now"></li> 19 <li></li> 20 <li></li> 21 </ul> 22 </div> 23 </div> 24 <script> 25 window.onload(function(){ 26 /*轮播图*/ 27 var banner = document.querySelector('.banner'); 28 /*屏幕宽度*/ 29 var width = banner.offsetWidth; 30 /*图片容器*/ 31 var imageBox = banner.querySelector('ul:first-child'); 32 /*点容器*/ 33 var pointBox = banner.querySelector('ul:last-child'); 34 /*所有的点*/ 35 var points = pointBox.querySelectorAll('li'); 36 37 var index=1;//核心 38 //加过渡 39 var addTransition = function () { 40 imageBox.style.transition = 'all 0.2s'; 41 imageBox.style.webkitTransition = 'all 0.2s'; 42 } 43 //移除过渡 44 var removeTransition = function () { 45 imageBox.style.transition = 'none'; 46 imageBox.style.webkitTransition = 'none'; 47 } 48 //移动位置 49 var setTranslateX = function (translateX) { 50 imageBox.style.transform = 'translateX(' + translateX + 'px)'; 51 imageBox.style.webkitTransform = 'translateX(' + translateX + 'px)'; 52 } 53 54 55 56 var time=setInterval(function(){ 57 index++; 58 addTransition();//加过渡 59 imageBox.transform='translateX('+ -index*width+'px)' 60 imageBox.webkitTransform='translateX('+ -index*width+'px)' 61 // 过渡 62 },3000) 63 64 imageBox.addEventListener('transitionend',function(){ 65 66 if(index>=4){ 67 index=1; 68 removeTransition(); 69 setTranslateX(-index*width); 70 } 71 else if(index<=0){ 72 index=3; 73 removeTransition(); 74 setTranslateX(-index*width); 75 } 76 /*根据索引设置点*/ 77 /*此时此刻 index 的取值范围 1-3）*/ 78 /*点索引 index - 1 */ 79 setPoint(); 80 }) 81 82 var setPoint = function () { 83 /*index 1-3*/ 84 /*清除样式*/ 85 for (var i = 0; i < points.length; i++) { 86 var obj = points[i]; 87 obj.classList.remove('circle');//原点样式 88 } 89 /*给对应的加上样式*/ 90 points[index - 1].classList.add('circle'); 91 } 92 /*绑定事件*/ 93 var startX = 0; 94 var distanceX = 0; 95 var isMove = false; 96 imageBox.addEventListener('touchstart', function (e) { 97 /*清除定时器*/ 98 clearInterval(timer); 99 /*记录起始位置的X坐标*/ 100 startX = e.touches[0].clientX; 101 }); 102 imageBox.addEventListener('touchmove', function (e) { 103 /*记录滑动过程当中的X坐标*/ 104 var moveX = e.touches[0].clientX; 105 /*计算位移 有正负方向*/ 106 distanceX = moveX - startX; 107 /*计算目标元素的位移 不用管正负*/ 108 /*元素将要的定位=当前定位+手指移动的距离*/ 109 var translateX = -index * width + distanceX; 110 /*滑动--->元素随着手指的滑动做位置的改变*/ 111 removeTransition(); 112 setTranslateX(translateX); 113 isMove = true; 114 }); 115 imageBox.addEventListener('touchend', function (e) { 116 /*4. 5. 实现*/ 117 /*要使用移动的距离*/ 118 if (isMove) { 119 if (Math.abs(distanceX) < width / 3) { 120 /*吸附*/ 121 addTransition(); 122 setTranslateX(-index * width); 123 } else { 124 /*切换*/ 125 /*右滑动 上一张*/ 126 if (distanceX > 0) { 127 index--; 128 } 129 /*左滑动 下一张*/ 130 else { 131 index++; 132 } 133 /*根据index去动画的移动*/ 134 addTransition(); 135 setTranslateX(-index * width); 136 } 137 } 138 139 startX = 0; 140 distanceX = 0; 141 isMove = false; 142 /*加上定时器*/ 143 clearInterval(timer); 144 timer = setInterval(function () { 145 index++; 146 /*加过渡*/ 147 addTransition(); 148 /*做位移*/ 149 setTranslateX(-index * width); 150 }, 1000); 151 }) 152 153 }) 154 155 156 </script> 157 158 </body> 159 </html>