移动端轮播图

注：移动端轮播图功能基本与PC端一致

---

效果：

1、可以自动播放图片

2、手指可以拖动播放轮播图

思路分析：

1、自动播放功能

2、开启定时器

3、移动端移动，可以大量使用translate移动

4、添加过渡效果

详解：

1、自动播放功能-无缝滚动

2、注意：我们判断条件是要等到图片滚动完毕之后再去判断，就是过渡完后去判断

3、此时需要添加检测过渡完成事件 transitionend

4、判断条件：如果索引号等于3说明走到最后一张图片。此时索引号要复原为0

5、此时图片，去掉过渡效果，然后移动

6、如果索引号小于0，说明是倒着走，索引号等于2

7、此时图片，去掉过渡效果，然后移动

---

需要用的大致属性

classList属性

classList属性是html5新增的一个属性，返回元素的类名

该属性用于在元素中添加，移除及切换CSS类，有以下方法

添加类：

element.classList.add( ' 类名  ')

切换类：

element.classList.toggle( ' 类名 ')

JS_touch介绍：
touchstart:当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。
touchmove:当手指在屏幕上滑动时连续的触发。在这个事件发生期间，调用preventDefault()可阻止滚动。
touchend:当手指从屏幕上移开时触发。
touchcancel:当系统停止跟踪触摸时触发。关于此事件的确切触发事件，文档中没有明确说明。

以上事件的event对象上面都存在如下属性：
touches:表示当前跟踪的触摸操作的Touch对象的数组。
targetTouches:特定于事件目标的Touch对象的数组。
changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。

每个Touch对象包含下列属性：
clientX:触摸目标在视口中的X坐标。
clientY:触摸目标在视口中的Y坐标。
identifier：表示触摸的唯一ID。
pageX：触摸目标在页面中的x坐标。
pageY：触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触摸的DOM节点坐标

阻止事件的默认动作
event.preventDefault()
 

<div class="box one"></div>
  <button>开灯 VS 关灯</button>
  <script>
    // classList 返回元素的类名
    var div = document.querySelector('div');
    console.log(div.classList[1]); // .one
    // 1、添加类名 是在后面追加类名不会覆盖以前的类名 不需要加·
    div.classList.add('two');
    // 2、删除类名
    div.classList.remove('two')
    // 3、切换类
    var btn = document.querySelector('button');
    btn.addEventListener('click', function () {
      document.body.classList.toggle('bg');
    })
  </script>

小圆点跟随变化效果

1、把ol里面li带有current类名的选出来去掉类名 remove

2、让当前索引号的小li加上 current add

3、但是，是等着过渡结束之后变化，所以这个写到transitionend事件里面

手指滑动轮播图

1、手指滑动轮播图

2、本质就是ul跟随手指移动，简单说就是移动端拖动元素

3、触摸元素touchstart：获取手指初始坐标

4、移动手指 touchmove ：计算手指的滑动距离 ， 并且移动盒子

5、离开手指touchend：根据滑动的距离分不同的情况

6、如果移动距离小于某个像素 就回弹原来的位置

7、如果移动距离大于某个像素就上一张下一张滑动

上代码！！！

window.addEventListener('load', function () {
  // alert(1);
  // 1. 获取元素 
  var focus = document.querySelector('.focus');
  var ul = focus.children[0];
  // 获得focus 的宽度
  var w = focus.offsetWidth;
  var ol = focus.children[1];
  // 2. 利用定时器自动轮播图图片
  var index = 0;
  var timer = setInterval(function () {
    index++;
    var translatex = -index * w;
    ul.style.transition = 'all .3s';
    ul.style.transform = 'translateX(' + translatex + 'px)';
  }, 2000);

  // 监听过渡完成的事件 transitionend
  ul.addEventListener('transitionend', function () {
    if (index >= 3) {  // 最后一张图片
      index = 0;
      // 去掉过渡效果  这样让我们的ul  快速的跳到目标位置
      ul.style.transition = 'none';
      // 利用最新的索引号 * 宽度  去滚动图片
      var translatex = -index * w;
      ul.style.transform = 'translateX(' + translatex + 'px)';
    } else if (index < 0) {
      index = 2;
      // 去掉过渡效果  这样让我们的ul  快速的跳到目标位置
      ul.style.transition = 'none';
      // 利用最新的索引号 * 宽度  去滚动图片
      var translatex = -index * w;
      ul.style.transform = 'translateX(' + translatex + 'px)';
    }

    // 3、小圆点跟随变化
    // 把ol里面li带有current类名的选出来去掉类名 remove
    // 2、让当前索引号的小li加上 current add
    // 3、但是，是等着过渡结束之后变化，所以这个写到transitionend事件里面
    ol.querySelector('.current').classList.remove('current');
    ol.children[index].classList.add('current')
  })

  // 4、手指滑动轮播图
  var startX = 0;
  var moveX = 0;
  var flag = false;
  // 1、触摸元素touchstart：获取手指初始坐标
  ul.addEventListener('touchstart', function (e) {
    moveX = e.targetTouches[0].pageX;
    // 手触摸的时候就停止定时器
    clearInterval(timer)
  });
  // 2、移动手指 touchmove ：计算手指的滑动距离 ， 并且移动盒子
  ul.addEventListener('touchmove', function (e) {
    moveX = e.targetTouches[0].pageX;
    // 移动盒子 ： 盒子原来的位置 + 手指移动的距离
    var translatex = -index * w + moveX;
    // 手指拖动的时候，不需要动画效果所以要取消过渡效果
    ul.style.transition = 'none';
    ul.style.transform = 'translateX(' + translatex + 'px)';
    flag = true;   // 如果用户手指移动过我们再去判断否则不做判断效果
    e.preventDefault(); // 阻止滚动屏幕的行为
  });
  // 手指离开 根据移动离开去判断是回弹还是播放上一张或者下一张
  ul.addEventListener('touchend', function (e) {
    if (flag) {
      if (Math.abs(moveX) > 50) {
        // 如果是右滑 就是 播放上一张  moveX 是正值
        if (moveX > 0) {
          index--;
        } else {
          // 如果是左滑就是 播放下一张  moveX  是负值
          index++;
        }
        var translatex = -index * w;
        ul.style.transition = 'all .3s';
        ul.style.transform = 'translateX(' + translatex + 'px)';
      } else {
        // (2) 如果移动距离小于50像素我们就回弹
        var translatex = -index * w;
        ul.style.transition = 'all .3s';
        ul.style.transform = 'translateX(' + translatex + 'px)';
      }
    }
    // 手指离开就重写开启定时器
    clearInterval(timer);
    timer = setInterval(function () {
      index++;
      var translatex = -index * w;
      ul.style.transition = 'all .3s';
      ul.style.transform = 'translateX(' + translatex + 'px)';
    }, 2000);
  })
})