移动端轮播图.png

需求

移动端轮播图功能和PC端基本一致
1.可以自动播放图片
2.手指可以拖动播放轮播图

案例分析

1.自动播放功能
Ⅰ.开启定时器
Ⅱ.移动端移动，可以使用translate移动
Ⅲ.想要图片优雅的移动，请添加过渡效果
2.无缝滚动
Ⅰ.注意，我们判断条件是要等到图片滚动完毕再去判断，就是过渡完成后判断
Ⅱ.此时需要添加检测过渡完成事件transitionend
Ⅲ.判断条件：如果索引号等于3，说明走到最后一张图片，此时索引号复原为0
Ⅳ.此时图片去掉过渡效果，然后移动
Ⅴ.如果索引号小于0，说明是倒着走，索引号等于2
Ⅵ.此时图片去掉过渡效果，然后移动
3.小圆点跟随变化
拓展：classList属性：H5新增的属性，返回元素的类名，IE10+支持。
该属性用于在元素中添加、移除及切换CSS类，有以下方法：
①添加类：element.classList.add(‘类名’);
②移除类：element.classList.remove(‘类名’);
③切换类：element.classList.toggle(‘类名’);
注意：类名前不加点
Ⅰ.把ol里面li带有current类名的选出来，去掉类名remove
Ⅱ.让当前索引号的li加上current add
Ⅲ.但是要等过渡效果结束之后变化，所以写到transitionend事件里面
4.手指滑动轮播图
Ⅰ.本质就是ul跟随手指移动，简单说就是移动端拖动元素
Ⅱ.触摸元素touchstart：获取手指初始坐标
Ⅲ.移动手指touchmove：计算手指的滑动距离，并且移动盒子
Ⅳ.离开手指touchend：根据滑动的距离分不同的情况
Ⅴ.如果移动距离小于某个像素就回弹原来位置
Ⅵ.如果移动距离大于某个像素就上一张下一张滑动。

源代码：
链接：https://share.weiyun.com/iBNCb0i4 密码：tyc8jb

  1. window.addEventListener('load',function(){
  2.     //获取元素
  3.     var focus = document.querySelector('.focus');
  4.     var ul = focus.children[0];
  5.     var ol = focus.children[1];
  6.     //获得focus的宽度
  7.     var w = focus.offsetWidth;
  8.     //1.利用定时器自动播放图片
  9.     var index = 0;
  10.     var timer = setInterval(function(){
  11.         index++;
  12.         var translatex = -index * w;//移动的距离
  13.         ul.style.transition = 'all .3s';
  14.         ul.style.transform = 'translateX(' + translatex + 'px)';
  15.     },2000);
  16.     //2.无缝滚动，等到图片滚动完毕再去判断，添加检测过渡完成事件transitionend
  17.     ul.addEventListener('transitionend',function(){
  18.         //走到最后一张闪到第一张
  19.         // 如果索引号等于3，说明走到最后一张图片，此时索引号复原为0
  20.         if(index >= 3){
  21.             index = 0;
  22.             ul.style.transition = '';//去掉过渡效果，实现闪到第一张
  23.             //重新过渡
  24.             var translatex = -index * w;
  25.             ul.style.transform = 'translateX(' + translatex + 'px)';
  26.         }else if(index < 0){
  27.             index = 2;
  28.             ul.style.transition = '';//去掉过渡效果
  29.             //重新过渡
  30.             var translatex = -index * w;
  31.             ul.style.transform = 'translateX(' + translatex + 'px)';
  32.         }
  33.         //3.小圆点跟随变化
  34.         //把ol里面li带有current类名的选出来，去掉类名
  35.         ol.querySelector('li.current').classList.remove('current');
  36.         //让当前索引号的li加上current
  37.         ol.children[index].classList.add('current');
  38.     });
  39.     //4.手指滑动轮播图
  40.     //触摸元素touchstart：获取手指初始坐标
  41.     var startX = 0;
  42.     var moveX = 0;
  43.     var flag = false;//用来控制手指移动了才重新计算位置的变量
  44.     ul.addEventListener('touchstart',function(e){
  45.         startX = e.targetTouches[0].pageX;
  46.         //手指要移动图片时，停止自动播放图片
  47.         clearInterval(timer);
  48.     });
  49.     //移动手指touchmove：计算手指的滑动距离，并且移动盒子
  50.     ul.addEventListener('touchmove',function(e){
  51.         //移动距离 = 移动后的手指坐标 - 手指初始坐标
  52.         moveX = e.targetTouches[0].pageX - startX;
  53.         //移动盒子：盒子原来的位置 + 手指移动的距离\
  54.         var translatex = -index * w + moveX;
  55.         //手指拖动的时候，不需要动画效果，所以要取消过渡效果
  56.         ul.style.transition = '';
  57.         ul.style.transform = 'translateX(' + translatex + 'px)';
  58.         flag = true;//如果用户手指移动过我们再去判断，否则不做判断效果
  59.         e.preventDefault();//阻止滚动屏幕的默认行为
  60.     });
  61.     ul.addEventListener('touchend',function(e){
  62.         //如果手指一动了再计算移动距离   节流阀
  63.         if(flag){
  64.             //如果移动距离大于50像素，就播放上一张或下一张,否则(小于50像素)，回弹原位置
  65.             if(Math.abs(moveX) > 50){
  66.                 //如果右滑（moveX为正）播放上一张，如果左滑（moveX为负）播放下一张
  67.                 if(moveX > 0){
  68.                     index--;
  69.                 }else{
  70.                     index++;
  71.                 }
  72.                 var translatex = -index * w;
  73.                 ul.style.transition = 'all .3s';
  74.                 ul.style.transform = 'translateX(' + translatex + 'px)';
  75.             }else{
  76.                 var translatex = -index * w;
  77.                 ul.style.transition = 'all .1s';
  78.                 ul.style.transform = 'translateX(' + translatex + 'px)';
  79.             }
  80.             }
  81.         //手指离开，重新启动定时器
  82.         clearInterval(timer);//确保只有一个定时器在执行
  83.         timer = setInterval(function(){
  84.             index++;
  85.             var translatex = -index * w;//移动的距离
  86.             ul.style.transition = 'all .3s';
  87.             ul.style.transform = 'translateX(' + translatex + 'px)';
  88.         },2000);
  89.     });
  90. });

.