分析：移動端的輪播圖最主要的就是手勢觸摸點擊，移動和移動結束的一系列的事件，利用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>