原生动态轮播图

叶子Pink

已于 2024-06-04 07:09:57 修改

阅读量93

点赞数 1

文章标签：前端

于 2024-05-31 15:36:18 首次发布

本文链接：https://blog.csdn.net/qq_70010470/article/details/139354252

版权

<!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, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>轮播图</title>
    <!-- css样式 -->
    <style></style>
  </head>

  <body>
    <div class="Lbt">
      <ul class="Img">
        <!-- 放图片 -->
        <li><img src="../img/1.webp" alt="" /></li>
        <li><img src="../img/2.webp" alt="" /></li>
        <li><img src="../img/3.webp" alt="" /></li>
        <li><img src="../img/4.webp" alt="" /></li>

        <!-- 这里还需要放一张图片 因为自动轮播到最后一张到第一张图片 不放会有空白 -->
        <li><img src="../img/5.webp" alt="" /></li>
      </ul>

      <!-- 左右两个按钮 -->
      <div class="left1">></div>
      <div class="right"><</div>
    </div>
  </body>
  <script>
    let Img = document.querySelector(".Img");
    // 定义计时器 和 向左偏移量
    var left = 0;
    var timer = null;
    // 实现自动滚动
    fun1();
    function fun1() {
      // 走完重置left值
      if (left <= -3200) {
        left = 0;
      }
      Img.style.marginLeft = left + "px";
      // 每次走完一张照片的时候 暂停一下
      var n = left % 900 === 0 ? (n = 700) : (n = 6);
      left -= 10;
      timer = setTimeout(fun1, n);
    }
    // 图片位置的函数
    function imgPosition(n) {
      let lt = -(n * 800);
      Img.style.marginLeft = lt + "px";
      left = lt;
    }
    // 调用
    // 点击左右按钮
    let left1 = document.querySelector(".left1");
    let right = document.querySelector(".right");
    left1.onclick = function () {
      let n = Math.floor(-left / 800) - 1;
      // 位置如果在第一个图片，则返回到最后一张
      if (n == -1) {
        n = 3;
      }
      if (n == -1) {
        n = 3;
      }
      imgPosition(n);
    };
    // // 点击右侧按钮
    right.onclick = function () {
      let n = Math.floor(-left / 800) + 1;
      // 位置如果在第四个图片，则返回到第一张
      if (n == 4) {
        n = 0;
      }
      imgPosition(n);
    };
  </script>
</html>