用原生js和transform动画手撸一个轮播图

最新推荐文章于 2024-03-29 08:09:33 发布

薛一半

最新推荐文章于 2024-03-29 08:09:33 发布

阅读量939

点赞数 10

文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/var_let_const/article/details/135378392

版权

本文介绍了一个使用纯HTML、CSS和JavaScript实现的轮播图，带有时间轴功能，支持自动和手动切换，且易于组件化。代码展示了如何控制背景颜色和处理左右切换按钮，但图片需要用户自定义替换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本代码意在实现一个带有时间轴的轮播图，时间轴可以跟随轮播图一起滚动。整体轮播图可以自动轮播亦可点击左右按钮进行手动切换，亦可用户误无操作5s后自动轮播。

代码如下

HTML代码

<div class="outside">
      <div class="box">
        <div class="box_top">
          <div class="box_top_inner" id="big">
            <div class="box_top_inner_item">
              <div class="time">2023</div>
              <div class="dotted"></div>
            </div>
            <div class="box_top_inner_item">
              <div class="time">2022</div>
              <div class="dotted"></div>
            </div>
            <div class="box_top_inner_item">
              <div class="time">2021</div>
              <div class="dotted"></div>
            </div>
            <div class="box_top_inner_item">
              <div class="time">2020</div>
              <div class="dotted"></div>
            </div>
            <div class="box_top_inner_item">
              <div class="time">2019</div>
              <div class="dotted"></div>
            </div>
            <div class="box_top_inner_item">
              <div class="time">2018</div>
              <div class="dotted"></div>
            </div>
          </div>
          <div class="box_top_dotted"></div>
        </div>
        <div class="box_bottom">
          <div class="box_bottom_inner" id="boxAll">
            <div class="box_bottom_item">0</div>
            <div class="box_bottom_item">1</div>
            <div class="box_bottom_item">2</div>
            <div class="box_bottom_item">3</div>
            <div class="box_bottom_item">4</div>
            <div class="box_bottom_item">5</div>
          </div>
          <div class="box_bottom_left" id="goLeft">
            <img src="./images/pause.png" alt="" />
          </div>
          <div class="box_bottom_right" id="goRight">
            <img src="./images/pause.png" alt="" />
          </div>
        </div>
      </div>
    </div>

css代码

* {
        margin: 0;
        padding: 0;
      }

      .outside {
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .box {
        width: 800px;
        height: 500px;
        border: 1px solid #ccc;
      }

      .box_top {
        width: 100%;
        height: 80px;
        position: relative;
        overflow: hidden;
      }
      .box_top_dotted {
        width: 100%;
        height: 1px;
        border-bottom: 5px dotted #ffcc99;
        position: absolute;
        left: 0;
        bottom: 2px;
      }
      .box_top_inner {
        display: flex;
        position: absolute;
        top: 0;
        left: 338px;
        transition-duration: 1s;
        transition-timing-function: linear;
      }
      .box_top_inner_item {
        font-size: 30px;
        width: 125px;
        height: 80px;
        position: relative;
      }

      .time {
        width: 125px;
        height: 80px;
        text-align: center;
        line-height: 80px;
        font-size: 30px;
        color: #ffcc99;
      }

      .dotted {
        width: 10px;
        height: 10px;
        border-radius: 10px;
        background-color: #ffcc99;
        position: absolute;
        bottom: 0px;
        left: 57px;
      }
      .box_bottom {
        width: 100%;
        height: 420px;
        background-color: #ccc;
        position: relative;
      }
      .box_bottom {
        width: 100%;
        height: 420px;
        overflow: hidden;
        position: relative;
      }
      .box_bottom_inner {
        transition: all 1s;
        transition-timing-function: linear;
        display: flex;
      }
      .box_bottom_item {
        width: 800px !important;
        height: 420px;
      }
      .box_bottom_item:nth-child(1) {
        background-color: red;
      }
      .box_bottom_item:nth-child(2) {
        background-color: orange;
      }
      .box_bottom_item:nth-child(3) {
        background-color: yellow;
      }
      .box_bottom_item:nth-child(4) {
        background-color: green;
      }
      .box_bottom_item:nth-child(5) {
        background-color: blue;
      }
      .box_bottom_item:nth-child(6) {
        background-color: rgb(55, 161, 64);
      }
      .box_bottom_left {
        width: 60px;
        height: 60px;
        position: absolute;
        left: 0px;
        top: 190px;
      }
      .box_bottom_left img {
        width: 60px;
        height: 60px;
        transform: rotateY(180deg);
      }
      .box_bottom_right {
        width: 60px;
        height: 60px;
        position: absolute;
        right: 0px;
        top: 190px;
      }
      .box_bottom_right img {
        width: 60px;
        height: 60px;
      }

js代码

<script>
      var flag = 0;
      var time = 5;
      var bigInterval = null;
      var animationTime = null;
      function animation() {
        clearInterval(animationTime);
        animationTime = null;
        document.getElementById("boxAll").style.width = `${800 * 6}px`;
        bigInterval = setInterval(() => {
          if (flag < 5) {
            flag++;
            document.getElementById("big").style.transform = `translateX(-${
              125 * flag
            }px)`;
            document.getElementById("boxAll").style.transform = `translateX(-${
              800 * flag
            }px)`;
          } else {
            document.getElementById(
              "big"
            ).style.transform = `translateX(${0}px)`;
            flag = 0;
            document.getElementById(
              "boxAll"
            ).style.transform = `translateX(-${0}px)`;
          }
          var arrLength = document.getElementsByClassName("time").length;
          for (var i = 0; i < arrLength; i++) {
            document.getElementsByClassName("time")[i].style.fontSize = "25px";
          }
          setTimeout(() => {
            document.getElementsByClassName("time")[flag].style.fontSize =
              "40px";
          }, 1000);
        }, 2000);
      }
      animation();
      document.getElementById("goRight").onclick = function () {
        time = 5;
        clearInterval(animationTime);
        animationTime = null;
        openAnimation();
        clearInterval(bigInterval);
        bigInterval = null;
        flag++;
        if (flag < 5) {
          document.getElementById("big").style.transform = `translateX(-${
            125 * flag
          }px)`;
          document.getElementById("boxAll").style.transform = `translateX(-${
            800 * flag
          }px)`;
        } else {
          document.getElementById("big").style.transform = `translateX(${0}px)`;
          flag = 0;
          document.getElementById(
            "boxAll"
          ).style.transform = `translateX(-${0}px)`;
        }
        var arrLength = document.getElementsByClassName("time").length;
        for (var i = 0; i < arrLength; i++) {
          document.getElementsByClassName("time")[i].style.fontSize = "25px";
        }
        setTimeout(() => {
          document.getElementsByClassName("time")[flag].style.fontSize = "40px";
        }, 1000);
      };
      document.getElementById("goLeft").onclick = function () {
        clearInterval(animationTime);
        animationTime = null;
        time = 5;
        openAnimation();
        clearInterval(bigInterval);
        bigInterval = null;
        var arrLength =
          Number(document.getElementsByClassName("time").length) - 1;
        flag--;
        if (flag > -1) {
          document.getElementById("big").style.transform = `translateX(-${
            125 * flag
          }px)`;
          document.getElementById("boxAll").style.transform = `translateX(-${
            800 * flag
          }px)`;
        } else {
          document.getElementById("big").style.transform = `translateX(-${
            arrLength * 125
          }px)`;
          flag = 5;
          document.getElementById("boxAll").style.transform = `translateX(-${
            arrLength * 800
          }px)`;
        }
        for (var i = 0; i < arrLength; i++) {
          document.getElementsByClassName("time")[i].style.fontSize = "25px";
        }
        setTimeout(() => {
          document.getElementsByClassName("time")[flag].style.fontSize = "40px";
        }, 1000);
      };
      //计时开启动画
      function openAnimation() {
        animationTime = setInterval(() => {
          if (time > 0) {
            time--;
          } else {
            animation();
          }
        }, 1000);
      }
    </script>

本代码由于使用纯原生写的，没有引入任何插件，所以本代码完全可以改动为公共组件进行使用，难度并不大。由于轮播图我使用的是背景颜色，以后需要更改为文字内容或者图片都可以的。需要注意的是左右按钮是个图片，需要读者自行寻找图片更换。