原生js实现左右了轮播图效果

岁月如歌_
已于 2023-12-28 14:02:31 修改
阅读量640
点赞数 11
文章标签： javascript css css3
于 2023-12-28 14:01:09 首次发布
本文链接：https://blog.csdn.net/namechenfl/article/details/135267764
版权
<!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>
      * {
        margin: 0;
        padding: 0;
        /*除去左、右箭头的下划线*/
        text-decoration: none;
      }
      .scrollLoop_box {
        width: 980px;
        height: 400px;
        border: 1px solid #000;
        margin: 20px auto;
        position: relative;
      }
      .scrollLoop_main {
        height: 400px;
        width: 100%;
        /* overflow: scroll; */
        overflow: hidden;
      }
      .scrollLoop_divImgs {
        width: 100%;
        height: 400px;
      }
      .scrollLoop_divImgs img {
        width: 980px;
        height: 400px;
        float: left;
      }
      .scrollLoop_arrow {
        /*记得给宽高*/
        width: 30px;
        height: 50px;
        border-radius: 3px;
        display: inline-block;
        text-align: center;
        font-size: 20px;
        line-height: 50px;
        position: absolute;
        top: 46%;
        font-weight: bold;
        display: none;
        color: #fff;
        padding: 3px 10px;
        background-color: rgba(0, 0, 0, 0.3);
      }
      .scrollLoop_left {
        left: 20px;
      }
      .scrollLoop_right {
        right: 20px;
      }
      .scrollLoop_box:hover .scrollLoop_arrow {
        display: block;
      }
      .scrollLoop_ul {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 20px;
      }

      .scrollLoop_ul li {
        list-style-type: none;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        display: inline-block;
        margin: 0 1px;
        background-color: aliceblue;
        font-size: 12px;
        text-align: center;
        line-height: 15px;
        cursor: pointer;
      }
      .scrollLoop_bg {
        background-color: #999 !important;
      }
    </style>
  </head>
  <body>
    <div class="scrollLoop_box">
      <div class="scrollLoop_main">
        <div class="scrollLoop_divImgs">
          <img src="./images/1.webp" />
          <img src="./images/2.webp" />
          <img src="./images/3.webp" />
          <img src="./images/4.webp" />
        </div>
      </div>
      <a href="javascript:;" class="scrollLoop_arrow scrollLoop_left">&lt;</a>
      <a href="javascript:;" class="scrollLoop_arrow scrollLoop_right">&gt;</a>
      <ul class="scrollLoop_ul">
        <!-- <li class="scrollLoop_bg"></li>
        <li></li>
        <li></li>
        <li></li> -->
      </ul>
    </div>
  </body>
  <script>
    (function () {
      var box = document.querySelector(".scrollLoop_box");
      var main = document.querySelector(".scrollLoop_main");
      var divImgs = document.querySelector(".scrollLoop_divImgs");
      var imgs = document.querySelectorAll("img");
      var btnLift = document.querySelector(".scrollLoop_left");
      var btnRight = document.querySelector(".scrollLoop_right");
      var scrollLoop_ul = document.querySelector(".scrollLoop_ul");
      console.log(imgs);
      // 把.scrollLoop_divImgs内的第一个img克隆然后在最后一个追加img
      divImgs.appendChild(imgs[0].cloneNode(true));

      divImgs.style.width = imgs.length * imgs[0].offsetWidth + "px";
      //两个定时器
      var dsq1, dsq2;
      //单个图片的长度，为后续移动路程的计算做准备
      var imgW = imgs[0].offsetWidth;
      //第一张显示的图片下标
      var imgIndex = 0;
      let Html = "";
      for (var i = 0; i < imgs.length; i++) {
        Html += `<li class="${i == imgIndex ? "scrollLoop_bg" : ""}"></li>`;
      }
      var scrollLoop_ul = document.querySelectorAll(".scrollLoop_ul")[0];
      scrollLoop_ul.innerHTML = Html;
      var lis = document.querySelectorAll(".scrollLoop_ul li");

      //初始的main的scrollLeft值 600px
      main.scrollLeft = imgW * imgIndex;
      //效果1：图片切换
      function moveMent() {
        //从第2张图片开始递增
        imgIndex++;
        console.log(imgIndex);
        // 当下标大于图片数量时，从第三1张图片开始
        if (imgIndex > imgs.length - 1) {
          imgIndex = 0;
          main.scrollLeft = imgW * imgIndex;
        }
        move();
        // //这里实现图片自己轮播时，按钮背景色跟随图片的切换改变
        for (var i = 0; i < lis.length; i++) {
          lis[i].className = "";
        }
        lis[imgIndex].className = "scrollLoop_bg";
      }
      console.log(lis, 222);
      //效果2：点击按钮时，切换到对应图片，并对应改变背景色
      for (let i = 0; i < lis.length; i++) {
        lis[i].onclick = function () {
          console.log(i, 2222);
          imgIndex = i;
          move();
          for (let j = 0; j < lis.length; j++) {
            lis[j].className = "";
          }
          lis[imgIndex].className = "scrollLoop_bg";
        };
      }

      //效果3：鼠标移入，轮播停止；鼠标移出，轮播继续
      main.onmouseover = function () {
        clearInterval(dsq1);
      };
      main.onmouseout = function () {
        dsq1 = setInterval(moveMent, 3000);
      };
      btnRight.onmouseover = function () {
        clearInterval(dsq1);
      };
      btnRight.onmouseout = function () {
        dsq1 = setInterval(moveMent, 3000);
      };
      btnLift.onmouseover = function () {
        clearInterval(dsq1);
      };
      btnLift.onmouseout = function () {
        dsq1 = setInterval(moveMent, 3000);
      };
      scrollLoop_ul.onmouseover = function () {
        clearInterval(dsq1);
      };
      scrollLoop_ul.onmouseout = function () {
        dsq1 = setInterval(moveMent, 3000);
      };

      //效果4：点击右边按钮，显示下一张
      btnRight.onclick = function () {
        moveMent();
      };
      //效果5：点击左边按钮，显示上一张
      btnLift.onclick = function () {
        imgIndex--;
        if (imgIndex < 0) {
          imgIndex = imgs.length - 1;
          //给main设置上一张图片的滚动距离
          main.scrollLeft = imgW * (imgIndex + 1);
        }
        move();
        // //这里实现图片自己轮播时，按钮背景色跟随图片的切换改变
        for (var i = 0; i < lis.length; i++) {
          lis[i].className = "";
        }
        lis[imgIndex].className = "scrollLoop_bg";
      };
      //调用moveMent函数,设置图片3秒切换一次
      //注意该调用需要放在其他效果代码后面
      dsq1 = setInterval(moveMent, 3000);
      function move() {
        //获取开始值和结束值,指每2张图片之间移动的距离
        var start = main.scrollLeft;
        var end = imgIndex * imgW;
        var speed = (end - start) / 20; //speed=30
        //num为步数，宽度为600px,speed为30，则走完需要20步
        var num = 0;
        clearInterval(dsq2);
        dsq2 = setInterval(function () {
          num++;
          if (num == 20) {
            clearInterval(dsq2);
            main.scrollLeft = end;
          } else {
            start += speed;
            main.scrollLeft = start;
          }
          //注意dsq2的时间和dsq1时间的大小，dsq2的时间间隔不能太大
        }, 30);
      }
    })();
  </script>
</html>