CSS+JS实现自动轮播图，悬停停止并带导航按钮,-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_63297813/article/details/129892170
通过css动画实现自动轮播。悬停停止轮播，选择按钮，前后点击按钮齐全。
<!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>
    <style>
      #content {
        width: 100%;
        position: relative;
        height: 400px;
        overflow: hidden;
      }

      #content .imgDiv {
        width: 100%;
        position: absolute;
        transition: all 1s linear;
      }
      .imgDiv img {
        width: 100%;
      }

      #content .imgDiv:first-child {
        left: 0px;
        top: 0px;
      }

      #content .imgDiv:not(:first-child) {
        left: -100%;
        top: 0px;
      }

      #itemList {
        position: absolute;
        bottom: 30px;
        width: 180px;
        left: 50%;
        margin-left: -120px;
      }

      #itemList .item {
        float: left;
        width: 50px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        background-color: yellow;
        border-radius: 50px;
        margin: 0 5px;
        cursor: pointer;
      }

      #left {
        position: absolute;
        left: 10px;
        background-color: yellow;
        width: 50px;
        height: 50px;
        top: 175px;
        text-align: center;
        line-height: 50px;
        cursor: pointer;
      }

      #right {
        position: absolute;
        right: 10px;
        background-color: yellow;
        width: 50px;
        height: 50px;
        top: 175px;
        text-align: center;
        line-height: 50px;
        cursor: pointer;
      }
      #right:hover,
      #left:hover {
        background-color: pink;
      }
      @keyframes leftComeOn {
        from {
          left: -100%;
        }
        to {
          left: 0%;
        }
      }
      @keyframes leftOut {
        from {
          left: 0%;
        }
        to {
          left: 100%;
        }
      }

      @keyframes rightComeOn {
        from {
          left: 100%;
        }
        to {
          left: 0%;
        }
      }
      @keyframes rightOut {
        from {
          left: 0%;
        }
        to {
          left: -100%;
        }
      }
      /* .red {
        color: red;
      } */
    </style>
  </head>
  <body>
    <div id="content" onmouseover="stopLunbo()" onmouseout="lunboBegin()">
      <div class="imgDiv"><img src="../img/1.jpg" alt="" />第一页</div>
      <div class="imgDiv"><img src="../img/2.jpg" alt="" />第二页</div>
      <div class="imgDiv"><img src="../img/3.jpg" alt="" />第三页</div>
      <div id="left" onclick="left()">&lt;</div>
      <div id="right" onclick="right()">&gt;</div>
      <div id="itemList">
        <div class="item" onclick="bth(0)">1</div>
        <div class="item" onclick="bth(1)">2</div>
        <div class="item" onclick="bth(2)">3</div>
      </div>
    </div>

    <script>
      // 轮播
      // 功能
      // 1.点击轮播的小圆点  对应小圆点的图片来 当前页面图片走.注意点击当前页面的小圆点不做操作

      // 核心  点击的按钮对应的图片是哪个(要来的)   当前图片是哪个(要走的)  说白了  谁来谁走
      let dangqianye = 0;
      color(dangqianye);
      function bth(num, fangxiang) {
        if (!fangxiang) fangxiang = num - dangqianye > 0 ? "left" : "right";
        let imgDiv = document.getElementsByClassName("imgDiv");
        if (dangqianye != num) {
          if (fangxiang == "left") {
            imgDiv[num].style.animation = "leftComeOn 0.5s linear forwards";
            imgDiv[dangqianye].style.animation = "leftOut 0.5s linear forwards";
          } else if (fangxiang == "right") {
            imgDiv[num].style.animation = "rightComeOn 0.5s linear forwards";
            imgDiv[dangqianye].style.animation =
              "rightOut 0.5s linear forwards";
          } else {
            imgDiv[num].style.animation = "leftComeOn 0.5s linear forwards";
            imgDiv[dangqianye].style.animation = "leftOut 0.5s linear forwards";
          }

          dangqianye = num;
        }
        color(dangqianye);
      }
      function color(num) {
        let bth = document.getElementsByClassName("item");
        for (let i = 0; i < bth.length; i++) {
          bth[i].style.backgroundColor = "yellow";
        }
        bth[num].style.backgroundColor = "pink";
      }
      // 2.点击向右按钮  当前图片的下一页进入轮播区域,从左往右进入
      // 对应的图片是
      // 当前图签是1 则走1来2
      // 当前图片是2 则走2来3
      // 当前图片是3 则走3来1
      // 3.点击向左的按钮   当前图片的上一页进入轮播区域,从右往左进入
      // 对应的图片是
      // 当前图片是1 则走1来3
      // 当前图片是2 则走2来1
      // 当前图片是3 则走3来2
      function left() {
        let num;
        if (dangqianye == 0) {
          num = 2;
        } else {
          num = dangqianye - 1;
        }
        bth(num, "right");
      }
      function right() {
        let num;
        if (dangqianye == 2) {
          num = 0;
        } else {
          num = dangqianye + 1;
        }
        bth(num, "left");
      }
      // 4.页面打开的时候 给人的感觉就是每个几秒点击了一下向右的按钮
      // 5.鼠标移入 自动轮播停止
      //   鼠标移出 自动轮播开始
      let lunboInterval = setInterval(function () {
        right();
      }, 2000);
      function stopLunbo() {
        clearInterval(lunboInterval);
      }
      function lunboBegin() {
        lunboInterval = setInterval(function () {
          right();
        }, 2000);
      }
    </script>
  </body>
</html>
原生JS手写轮播
