做过很多种类型的幻灯片，无缝滑动幻灯加上自动播放应该是幻灯最常见的形式，各大组件库提供的幻灯也一般是这种形式。

那这次用原生js实现一个。

点击图片看效果。

功能：

1、默认自动播放，鼠标经过停止，移开继续自动播放。

2、点击上一张、下一张，通过左右滑动实现切换。

3、通过克隆节点实现无缝滑动。

4、核心在于定时器的运用。

核心代码：

  //准备数据
  // 初始化界面
  // 克隆第一个节点到最后，克隆最后一个节点到最前面
  // 点击下一张  改变num的值 ，实现图片向左边滑动一张  条件：如果滑动到最后一张，要立刻移动到第二张  改变小圆点的高亮状态
  // 点击上一张 改变num的值  实现图片向右边滑动一张 条件：如果滑动到第一张，则立刻移动到倒数第二张，改变小圆点的高亮
  // 点击小圆点，改变num的值,滑动图片到对应的位置，改变高亮状态

  // 找对象
  const oBanner = document.querySelector('.fy-banner');
  const oUl = oBanner.querySelector('.fy-banner-ul');
  const oDoitUl = oBanner.querySelector('.pagebarlist');
  const oDoitLis = oDoitUl.getElementsByClassName('pagebaritem');
  const oBtnNext = oBanner.querySelector('.btn-next');
  const oBtnPrev = oBanner.querySelector('.btn-prev');

  // 准备数据
  let arr = ['images/banner_1.png', 'images/banner_2.jpg'];
  let len = arr.length;
  // 获取banner的宽度
  let oBannerWidth = oBanner.clientWidth;
  // console.log(oBannerWidth);

  // 初始化界面
  let str = '';
  let str1 = '';
  arr.forEach(function (item) {
    str += `<li class="fy-banner-li">
          <a href="#" class="fy-banner-a">
              <img src="${item}" alt="中秋活动" class="fy-banner-img">
          </a>
      </li>`;
    str1 += `<li class="pagebaritem"></li>`;
  })
  oUl.innerHTML = str;
  oDoitUl.innerHTML = str1;

  // 把最后一个节点克隆到第一个位置
  oUl.prepend(oUl.lastElementChild.cloneNode(true));
  // 把第二个节点克隆到最后一个位置
  oUl.append(oUl.children[1].cloneNode(true));

  // 初始化第一个 0 1 2 3
  let num = 0;
  oDoitLis[num].classList.add('active');
  oUl.style.transform = `translateX(-${oBannerWidth * (num + 1)}px)`;

  // 自动播放
  let timer = null;
  timer = setInterval(autoPlay, 3000);
  oBanner.addEventListener('mouseenter', function () {
    clearInterval(timer);
  })
  oBanner.addEventListener('mouseleave', function () {
    timer = setInterval(autoPlay, 3000);
  })

  // 点击下一张
  oBtnNext.addEventListener('click', function () {
    autoPlay();
  })
  // 点击上一张
  oBtnPrev.addEventListener('click', function () {
    // num的变化 1 0
    num--;
    // 图片滑动
    // 异步的时候把动画移除了，所以需要再次添加上动画过程。
    slide();
    if (num <= -1) {
      num = len - 1;
      // 回到倒数第二张图片的位置
      stopSlide();
    }
    // 小圆点高亮的变化
    changeDoit();
  });


  // 点击小圆点的切换
  [...oDoitLis].forEach(function (item, index) {
    item.addEventListener('click', function () {
      // 更新num的值
      num = index;
      // 图片滑动
      slide();
      // 高亮更新
      changeDoit();
    })
  })

  function autoPlay () {
    // num的变化 1 0
    num++;
    // 图片滑动
    // 异步的时候把动画移除了，所以需要再次添加上动画过程。
    slide();
    if (num >= len) {
      num = 0;
      // 回到第二张图片的位置
      stopSlide();
    }
    changeDoit();
  }

  // 图片滑动
  function slide () {
    oUl.style.transition = '0.5s linear';
    oUl.style.transform = `translateX(-${oBannerWidth * (num + 1)}px)`;
  }

  // 图片停止滑动
  function stopSlide () {
    setTimeout(function () {
      // 异步执行把图片挪回到初始位置的时候，不能有动画
      oUl.style.transition = 'none';
      oUl.style.transform = `translateX(-${oBannerWidth * (num + 1)}px)`;
    }, 500)
  }
 
  // 小圆点高亮的变化函数
  function changeDoit () {
    [...oDoitLis].forEach(function (item, index) {
      item.classList.remove('active');
    })
    oDoitLis[num].classList.add('active');
  }
}