自己动手实现轮播图（含节流）

最新推荐文章于 2023-11-14 20:49:55 发布

就算前路依然漫长

最新推荐文章于 2023-11-14 20:49:55 发布

阅读量532

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/zl871318846/article/details/123462230

版权

话不多说，直接上源码，有注释哦~

<!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>Document</title>
  </head>
  <body>
    <ul></ul>
    <button id="btn1">←</button>
    <button id="btn2">→</button>
  </body>
  <script>
    // 图片列表
    const imgs = [
      "imgs/1.jpg",
      "imgs/2.jpg",
      "imgs/3.jpg",
      "imgs/4.jpg",
      "imgs/5.jpg",
    ];

    // 用来管理节点的数组
    let nodeArr = [];

    // 创建节点并将节点加入数组
    const ndUl = document.querySelector("ul");
    for (let i = 0; i < imgs.length; i++) {
      const ndLi = document.createElement("li");
      const ndImg = document.createElement("img");
      ndImg.setAttribute("src", imgs[i]);
      ndLi.appendChild(ndImg);
      ndUl.appendChild(ndLi);
      nodeArr.push(ndLi);
    }

    // 初始化轮播图
    getNext();

    // 节流，防止按钮点击过快导致轮播图过渡还没执行完就执行下一次
    // 目的1： 让每一次的过渡效果都执行完，否则会导致轮播图变形
    // 目的2： 节省浏览器渲染资源
    function throttle(fn, time) {
      let timer = null;
      return function () {
        if (!timer) {
          fn();
          timer = setTimeout(() => {
            timer = null;
          }, time);
        }
      };
    }
    const getPre_throttle = throttle(getPre, 500);
    const getNext_throttle = throttle(getNext, 500);

    /**
     * 轮播函数可能有点不太好懂，建议动手画画图模拟一下
     * */
    // 轮播函数，方向：从左往右
    function getPre() {
      // 循环数组中的节点
      const first = nodeArr.pop();
      nodeArr.unshift(first);

      // 为循环到相应位置的节点重新设置样式
      nodeArr[0].style.left = "0";
      nodeArr[0].style.transform = "scale(0)";

      nodeArr[nodeArr.length - 3].style.left = "0";
      nodeArr[nodeArr.length - 3].style.transform = "scale(1)";

      nodeArr[nodeArr.length - 2].style.left = "200px";
      nodeArr[nodeArr.length - 2].style.transform = "scale(1.3)";
      nodeArr[nodeArr.length - 2].style.zIndex = "100";

      nodeArr[nodeArr.length - 1].style.left = "400px";
      nodeArr[nodeArr.length - 1].style.transform = "scale(1)";
      nodeArr[nodeArr.length - 1].style.zIndex = "0";
    }

    // 轮播函数，方向：从右往左（默认）
    function getNext() {
      // 循环数组中的节点
      const first = nodeArr.shift();
      nodeArr.push(first);

      // 为循环到相应位置的节点重新设置样式
      nodeArr[nodeArr.length - 4].style.left = "400px";
      nodeArr[nodeArr.length - 4].style.transform = "scale(0)";

      nodeArr[nodeArr.length - 3].style.left = "0";
      nodeArr[nodeArr.length - 3].style.transform = "scale(1)";
      nodeArr[nodeArr.length - 3].style.zIndex = "0";

      nodeArr[nodeArr.length - 2].style.left = "200px";
      nodeArr[nodeArr.length - 2].style.transform = "scale(1.3)";
      nodeArr[nodeArr.length - 2].style.zIndex = "100";

      nodeArr[nodeArr.length - 1].style.left = "400px";
      nodeArr[nodeArr.length - 1].style.transform = "scale(1)";
    }

    // 定时器，自动轮播
    let timer = setInterval(getNext, 3000);

    //主动点击按钮切换图片
    document.querySelector("#btn1").onclick = function () {
      //暂时关闭定时器
      clearInterval(timer);

      getNext_throttle();

      // 重新打开定时器
      timer = setInterval(getNext, 3000);
    };
    document.querySelector("#btn2").onclick = function () {
      // 暂时关闭定时器
      clearInterval(timer);

      getPre_throttle();

      // 重新打开定时器
      timer = setInterval(getNext, 3000);
    };
  </script>
</html>
<style>
  ul {
    list-style: none;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    height: 300px;
    width: 800px;
  }
  ul li {
    position: absolute;
    height: 100%;
    width: 400px;
    z-index: 0;
    transition: all 0.5s;
  }
  ul li img {
    height: 100%;
    width: 100%;
  }
</style>

就算前路依然漫长

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
自己动手实现轮播图（含节流）

话不多说，直接上源码，有注释哦~<!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" /
复制链接

扫一扫