移动端轮播图手势分析+源码

http://dobinspark.com.cn/

分析：移动端的轮播图最主要的就是手势触摸点击，移动和移动结束的一系列的事件，利用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>