移动端可互动轮播图

首先通过事件监听获得到初始滑动位置，并关闭掉轮播图的自动轮播定时器

//设置事件代理
$(".slider").on("touchstart", function (e) {
  // 当滑动触发的时候关闭定时器
  clearInterval(time);

  // 开始时的px
  startX = e.touches[0].clientX;
});

然后通过事件监听，获得滑动停止的位置，同时打开节流阀，防止短时间内多次滑动导致出现问题，先获得到停止的位置，然后判断滑动距离是否超过一定的值，超过判断为用户滑动，然后判断正负，正值向下一张滑动，负值向上一张滑动，在内里调用自动轮播函数即可，随后重新启动定时器，确保用户滑动完一次松手以后，轮播图的自动轮播可以重新启动，最后在所有语句执行完成以后，过一秒，关闭节流阀

$(".slider").on("touchend", function (e) {
  // 判断是否开启节流阀
  if (silider_switch == true) {
    return;
  }
  // 开启节流阀
  silider_switch = true;
  // 结束时的px
  endX = e.changedTouches[0].clientX;
  // 计算移动的px
  let move = startX - endX;
  // 判断用户滑动的距离,避免用户误触
  if (move > 60 || move < -60) {
    if (move > 0) {
      // 执行从左向右滑动
      auto_next();

      time = setInterval(auto_next, 2000);
      changeSlide(index);
    } else {
      // 执行从右向左滑动
      auto_next_prev();

      time = setInterval(auto_next, 2000);
      changeSlide(index);
    }
  }
  console.log(silider_switch);

  setTimeout(function () {
    // 1秒以后关闭节流阀
    silider_switch = false;
  }, 1000);
});