原生JS实现轮播图案例

前端小凯

已于 2022-10-02 23:45:07 修改

阅读量192

点赞数 1

文章标签： javascript html 前端

于 2022-10-02 23:33:08 首次发布

本文链接：https://blog.csdn.net/qq_43235503/article/details/127147805

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>轮播图</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 520px;
        height: 280px;
        cursor: pointer;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .inner {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      .con {
        width: 2600px;
        height: 100%;
      }
      img {
        width: 520px;
        height: 280px;
        float: left;
      }
      ul {
        width: 100%;
        height: 10px;
        position: absolute;
        bottom: 10px;
      }
      li {
        width: 50px;
        height: 100%;
        list-style-type: none;
        background-color: #ccc;
        float: left;
        margin-left: 45px;
      }
      .active {
        background-color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="inner">
        <div class="con">
          <img src="./img/1.jpg" alt="" />
          <img src="./img/2.jpg" alt="" />
          <img src="./img/3.jpg" alt="" />
          <img src="./img/4.jpg" alt="" />
          <img src="./img/5.jpg" alt="" />
          <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
      </div>
    </div>

    <script>
      var inner = document.querySelector(".inner");
      var imgs = document.querySelectorAll("img");
      var lis = document.querySelectorAll("li");

      // 图片和轮播器下标
      var index = 0;

      // 第一个定时器
      var timer1 = null;

      // 第二个定时器
      var timer2 = null;
      function autoMove() {
        timer1 = setInterval(function () {
          index++;
          if (index >= imgs.length) {
            index = 0;
          }

          // 开始位置是可见的位置的左边滚动距离
          var start = inner.scrollLeft;

          // 结束位置是滚过去几个加上当前的图片的宽
          var end = index * imgs[0].offsetWidth;

          // 初始步长
          var stop = 0;

          // 最大的步长
          var maxStop = 20;

          // 移动的距离等于结束的距离减去开始距离除以最大的步长
          var move = (end - start) / maxStop;

          // timer2是每50毫秒执行一次 执行到最大步长清空定时器 为了有一个停顿的时间
          timer2 = setInterval(function () {
            // 基础步长加加
            stop++;
            // 基础步长大于最大步长
            if (stop >= maxStop) {
              // 基础步长归0
              stop = 0;

              // 清空定时器 让可以停下来
              clearInterval(timer2);
            }
            // 可见的向左滚动的距离加上每次是移动的距离
            inner.scrollLeft += move;
          }, 50);

          // 当滑到图片上清除timer1定时器
          imgs[index].onmouseenter = function () {
            clearInterval(timer1);
          };

          // 当离开图片时重新执行函数
          imgs[index].onmouseleave = function () {
            autoMove();
          };

          // 当滑到轮播器上清除timer1定时器
          lis[index].onmouseenter = function () {
            clearInterval(timer1);
          };

          // 当离开轮播器时重新执行函数
          lis[index].onmouseleave = function () {
            autoMove();
          };

          // 排他法清空轮播器的样式
          for (var i = 0; i < lis.length; i++) {
            lis[i].className = "";
          }

          // 添加轮播图样式
          lis[index].className = "active";
        }, 2000);
      }
      autoMove();
    </script>
  </body>
</html>

可以简单封装一下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>轮播图封装</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 520px;
        height: 280px;
        cursor: pointer;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .inner {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      .con {
        width: 2600px;
        height: 100%;
      }
      img {
        width: 520px;
        height: 280px;
        float: left;
      }
      ul {
        width: 100%;
        height: 10px;
        position: absolute;
        bottom: 10px;
      }
      li {
        width: 50px;
        height: 100%;
        list-style-type: none;
        background-color: #ccc;
        float: left;
        margin-left: 45px;
      }
      .active {
        background-color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="inner">
        <div class="con">
          <img src="./img/1.jpg" alt="" />
          <img src="./img/2.jpg" alt="" />
          <img src="./img/3.jpg" alt="" />
          <img src="./img/4.jpg" alt="" />
          <img src="./img/5.jpg" alt="" />
          <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
      </div>
    </div>

    <script>
      var inner = document.querySelector(".inner");
      var imgs = document.querySelectorAll("img");
      var lis = document.querySelectorAll("li");

      // 图片和轮播器下标
      var index = 0;

      // 第一个定时器
      var timer1 = null;

      // 第二个定时器
      var timer2 = null;
      function autoMove() {
        timer1 = setInterval(function () {
          index++;
          if (index >= imgs.length) {
            index = 0;
          }

          // 轮播图移动部分
          gogo();

          // 轮播图暂停和轮播器部分
          clear();
        }, 2000);
      }
      autoMove();

      // 轮播图移动部分
      function gogo() {
        // 开始位置是可见的位置的左边滚动距离
        var start = inner.scrollLeft;

        // 结束位置是滚过去几个加上当前的图片的宽
        var end = index * imgs[0].offsetWidth;

        // 初始步长
        var stop = 0;

        // 最大的步长
        var maxStop = 20;

        // 移动的距离等于结束的距离减去开始距离除以最大的步长
        var move = (end - start) / maxStop;
        // timer2是每50毫秒执行一次 执行到最大步长清空定时器 为了有一个停顿的时间
        timer2 = setInterval(function () {
          // 基础步长加加
          stop++;
          // 基础步长大于最大步长
          if (stop >= maxStop) {
            // 基础步长归0
            stop = 0;

            // 清空定时器 让可以停下来
            clearInterval(timer2);
          }
          // 可见的向左滚动的距离加上每次是移动的距离
          inner.scrollLeft += move;
        }, 50);
      }

      // 轮播图暂停和轮播器部分
      function clear() {
        // 当滑到图片上清除timer1定时器
        imgs[index].onmouseenter = function () {
          clearInterval(timer1);
        };

        // 当离开图片时重新执行函数
        imgs[index].onmouseleave = function () {
          autoMove();
        };

        // 当滑到轮播器上清除timer1定时器
        lis[index].onmouseenter = function () {
          clearInterval(timer1);
        };

        // 当离开轮播器时重新执行函数
        lis[index].onmouseleave = function () {
          autoMove();
        };

        // 排他法清空轮播器的样式
        for (var i = 0; i < lis.length; i++) {
          lis[i].className = "";
        }

        // 添加轮播图样式
        lis[index].className = "active";
      }
    </script>
  </body>
</html>