PC 端轮播图的实现

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>轮播图</title>
  <style>
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    li {
      display: inline-block;
    }

    .rotation {
      position: relative;
      margin: 50px auto;
      width: 300px;
      height: 200px;
      background-color: #ccc;
      overflow: hidden;
    }

    .rotation>ul {
      position: absolute;
      top: 0;
      height: 0;
      width: 600%;
      height: 100%;
    }

    .rotation>ul>li {
      float: left;
      width: 300px;
      height: 100%;
    }

    .rotation>ul>li img {
      width: 100%;
      height: 100%;
    }

    .dot {
      position: absolute;
      top: 93%;
      left: 50%;
      transform: translateX(-50%);
      width: 80px;
      height: 10px;
      /* background-color: rosybrown; */
    }

    .dot ul {
      width: 100%;
      height: 100%;
      text-align: center;
      line-height: 10px;
    }

    .dot li {
      width: 5px;
      height: 5px;
      margin: 0 2px;
      /* background-color: #fff; */
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    .current {
      background-color: #fff;
    }

    .direction {
      display: none;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 18px;
      height: 38px;
      background-color: rgba(188, 143, 143, .5);
      font-size: 18px;
      color: #fff;
      line-height: 38px;
      text-align: center;
      cursor: pointer;
    }

    .previous {
      left: 0;
    }

    .next {
      right: 0;
    }
  </style>
</head>

<body>
  <div class="rotation">
    <ul>
      <li>
        <a href="javascript:;"><img src="../img/bg1.jpg" alt="" srcset=""></a>
      </li>
      <li>
        <a href="javascript:;"><img src="../img/bg2.jpg" alt="" srcset=""></a>
      </li>
      <li>
        <a href="javascript:;"><img src="../img/bg3.jpg" alt="" srcset=""></a>
      </li>
      <li>
        <a href="javascript:;"><img src="../img/bg4.jpg" alt="" srcset=""></a>
      </li>
    </ul>
    <div class="direction previous">&lt;</div>
    <div class="direction next">&gt;</div>
    <div class="dot">
      <ul>
      </ul>
    </div>
  </div>

  <script src="../js/common-until.js"></script>
  <script>
    /**
     * 1. 鼠标进入轮播界面出现上下切换按钮
     * 2. 小圆点显示当前轮播页并且可切换
     * 3. 鼠标悬浮在轮播界面时不自动切换
     * 4. 自动切换图片
     */
    // 页面除css, 图片,flash 等外加载完成执行
    window.addEventListener('DOMContentLoaded', function() {
      let rotation = $my('.rotation'); // 轮播图
      let nodeList = $my('.direction', 1); // 方向标
      let dotul = $my('.dot').querySelector('ul'); // 指示圆点
      let rotationImg = rotation.querySelector('ul'); // 轮播内容
      let rotationImgW = rotation.clientWidth; // 轮播内容宽度
      let Imgnum = rotationImg.children.length;
      let currentNum = 0; // 当前轮播的图片坐标
      let timer = null; // 轮播倒计时id
      let throttle = true; // 节流阀开关
      // 动态生成指示小圆点
      for (let i = 0; i < Imgnum; i++) {
        let li = document.createElement('li');
        li.setAttribute('data-index', i);
        i == 0 ? li.className = 'current' : null;
        dotul.appendChild(li);
      }
      // 拷贝第一张图用于实现无缝连接
      let first = rotationImg.children[0].cloneNode(true);
      rotationImg.appendChild(first);
      Imgnum += 1;
      // 指示圆点点击切换轮播图
      dotul.addEventListener('click', function(e) {
          let target = e.target || e.srcElement;
          if (target.nodeName.toLowerCase() == 'li') {
            // debugger
            let _currentX = -(target.dataset.index * rotationImgW);
            currentNum = target.dataset.index;
            animate(rotationImg, 'x', _currentX);
            for (let i in dotul.children) {
              i == target.dataset.index ? dotul.children[i].className = 'current' : dotul.children[i].className = null;
            }
          }
        })
        // 监听轮播模块的鼠标移动，进入显示切换按钮
      rotation.addEventListener('mouseenter', function() {
        nodeList[0].style.display = 'block';
        nodeList[1].style.display = 'block';
        clearInterval(timer);
      });
      rotation.addEventListener('mouseleave', function() {
        nodeList[0].style.display = 'none';
        nodeList[1].style.display = 'none';
        timer = setInterval(function() {
          nodeList[0].click();
        }, 3000)
      });
      // 监听切换按钮的点击事件
      nodeList[0].addEventListener('click', function() {
        if (!throttle) {
          return;
        }
        throttle = false;
        if (currentNum == (Imgnum - 1)) {
          rotationImg.style.left = '0';
          currentNum = 0;
        }
        currentNum++;
        animate(rotationImg, 'x', -currentNum * rotationImgW, () => throttle = true);
        let _currentNum = currentNum;
        _currentNum = _currentNum == Imgnum - 1 ? 0 : _currentNum;
        for (let i of dotul.children) {
          i.dataset.index == _currentNum ? i.className = 'current' : i.className = null;
        }
      })
      nodeList[1].addEventListener('click', function() {
          if (!throttle) {
            return;
          }
          throttle = false;
          if (currentNum == 0) {
            rotationImg.style.left = (-Imgnum + 1) * rotationImgW + 'px';
            currentNum = Imgnum - 1;
          };
          currentNum--;
          animate(rotationImg, 'x', -currentNum * rotationImgW, () => throttle = true);
          let _currentNum = currentNum;
          _currentNum = _currentNum == Imgnum - 1 ? Imgnum - 2 : _currentNum;
          for (let i of dotul.children) {
            i.dataset.index == _currentNum ? i.className = 'current' : i.className = null;
          }
        })
        // 自动轮播
      timer = setInterval(function() {
        nodeList[0].click();
      }, 3000)
    })
  </script>
</body>

</html>