实现滚动特效和轮播图特效使用纯HTML、CSS、JavaScript实现滚动特效和滚动轮播图功能分别记录了常见的一种实现

滚动特效的实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .box {
        width: 1000px;
        height: 130px;
        border: 1px solid #000;
        overflow: hidden;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -65px;
        margin-left: -500px;
      }

      .box ul {
        list-style: none;
        /* width必须足够大才能让li标签浮动到同一排 */
        width: 5000px;
        position: relative;
      }

      .box ul li {
        float: left;
        margin-right: 10px;
      }
    </style>
  </head>

  <body>
    <div id="box" class="box">
      <ul id="list">
        <li><img src="images/number/0.png" alt="" /></li>
        <li><img src="images/number/1.png" alt="" /></li>
        <li><img src="images/number/2.png" alt="" /></li>
        <li><img src="images/number/3.png" alt="" /></li>
        <li><img src="images/number/4.png" alt="" /></li>
        <li><img src="images/number/5.png" alt="" /></li>
      </ul>
    </div>
    <script>
      let box = document.getElementById("box");
      let list = document.getElementById("list");

      // 将list复制一遍
      list.innerHTML += list.innerHTML;

      // 表示当前list的left值
      let left = 0;

      // 定时器
      let timer;

      move();

      // 动画封装成函数
      function move() {
        // 设表先关，防止动画积累
        clearInterval(timer);

        timer = setInterval(function () {
          left -= 4;
          // 图片宽200px + margin-right 10px总共210px, 共六张图片
          if (left <= -1260) {
            left = 0;
          }
          list.style.left = left + "px";
        }, 20);
      }

      // 鼠标进入停止定时器
      box.onmouseenter = function () {
        clearInterval(timer);
      };

      // 鼠标离开继续定时器
      box.onmouseleave = function () {
        move();
      };
    </script>
  </body>
</html>

轮播图的实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .carousel {
        width: 650px;
        height: 360px;
        border: 1px solid #000;
        margin: 50px auto;
        position: relative;
        overflow: hidden;
      }
      .carousel ul {
        list-style: none;
        width: 6000px;
        position: relative;
        left: 0px;
        transition: left 0.5s ease 0s;
      }
      .carousel ul li {
        float: left;
      }
      .carousel .leftbtn {
        position: absolute;
        left: 20px;
        top: 50%;
        margin-top: -25px;
        width: 50px;
        height: 50px;
        background-color: rgb(28, 180, 226);
        border-radius: 50%;
      }
      .carousel .rightbtn {
        position: absolute;
        right: 20px;
        top: 50%;
        margin-top: -25px;
        width: 50px;
        height: 50px;
        background-color: rgb(28, 180, 226);
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <div class="carousel">
      <ul id="list">
        <li><img src="images/beijing/0.jpg" alt="" /></li>
        <li><img src="images/beijing/1.jpg" alt="" /></li>
        <li><img src="images/beijing/2.jpg" alt="" /></li>
        <li><img src="images/beijing/3.jpg" alt="" /></li>
        <li><img src="images/beijing/4.jpg" alt="" /></li>
      </ul>
      // 给href赋值一个空javascript函数防止刷新页面
      <a href="javascript:;" class="leftbtn" id="leftbtn"></a>
      <a href="javascript:;" class="rightbtn" id="rightbtn"></a>
    </div>
    <script>
      // 得到按钮和ul，ul整体进行运动
      let leftbtn = document.getElementById("leftbtn");
      let rightbtn = document.getElementById("rightbtn");
      let list = document.getElementById("list");
      // 克隆第一张图片
      let cloneli = list.firstElementChild.cloneNode(true);
      list.appendChild(cloneli);

      // 当前ul显示到第几张了，从0开始数
      let idx = 0;

      // 节流锁
      let lock = true;

      // 右边按钮监听
      rightbtn.onclick = function () {
        // 判断锁的状态
        if (!lock) return;

        lock = false;

        // 最后一张图片会把过渡去掉, 要重新添加过渡
        list.style.transition = "left .5s ease 0s";
        idx++;
        if (idx > 4) {
          // 设置一个延时器，延时器的功能就是将ul瞬间拉回0的位置，延时器的目的就是让过渡动画结束之后, 取消掉过渡，因为要的是瞬间移动，不是以动画形式回去
          setTimeout(function () {
            list.style.transition = "none";
            list.style.left = 0;
            idx = 0;
          }, 500);
        }
        list.style.left = -idx * 650 + "px";

        // 函数节流
        setTimeout(function () {
          lock = true;
        }, 500);
      };

      // 左边按钮监听
      leftbtn.onclick = function () {
        if (!lock) return;

        lock = false;

        // 判断是不是第0张，如果是，就要瞬间用假的替换真的
        if (idx == 0) {
          // 取消掉过渡
          list.style.transition = "none";
          // 直接瞬间移动到最后的假图片上
          list.style.left = -5 * 650 + "px";
          // 设置一个延时器，这个延时器的延时时间可以是0毫秒，虽然是0毫秒，但是可以让我们过渡先是瞬间取消，然后再加上
          setTimeout(function () {
            // 加过渡
            list.style.transition = "left .5s ease 0s";
            // idx改为真正的最后一张
            idx = 4;
            list.style.left = -idx * 650 + "px";
          }, 0);
        } else {
          idx--;
          list.style.left = -idx * 650 + "px";
        }

        // 函数节流
        setTimeout(function () {
          lock = true;
        }, 500);
      };
    </script>
  </body>
</html>