轮播图自动切换和导航切换

最新推荐文章于 2023-09-17 18:45:59 发布

吃不饱的我

最新推荐文章于 2023-09-17 18:45:59 发布

阅读量82

点赞数

分类专栏：笔记文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/yh_31/article/details/128105279

版权

笔记专栏收录该内容

70 篇文章 0 订阅

订阅专栏

修改图片地址即可

<!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;
      list-style: none;
    }

    .outer {
      width: 320px;
      height: 212px;
      border: 1px solid blue;
      margin: 100px auto;
      position: relative;
    }

    .img-list {
      height: 100%;
    }

    .img-list li {
      position: absolute;
      opacity: 0;
      transition: opacity .3s;
    }

    img {
      width: 320px;
      vertical-align: none;
    }

    .img-list .current {
      z-index: 1;
      opacity: 1;
    }

    /* 箭头样式 */
    .prev-next a {
      height: 20px;
      font-size: 20px;
      color: #fff;
      text-decoration: none;
      font-weight: bold;
      position: absolute;
      margin: auto;
      top: 0;
      bottom: 0;
      z-index: 2;
      opacity: .5;
    }

    .prev-next a:hover {
      opacity: 1;
    }

    #next {
      right: 0;
    }

    /* 小圆点 */
    .dot {
      position: absolute;
      display: flex;
      justify-content: center;
      z-index: 3;
      left: 0;
      right: 0;
      bottom: 5px;
      margin: auto;
    }

    .dot a {
      width: 10px;
      height: 10px;
      margin: 5px;
      border-radius: 50%;
      background-color: #fff;
      opacity: .5;
    }

    .dot a:hover,
    .dot .active {
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="outer">
    <ul class="img-list">
      <li class="current">
        <a href="javascript:;">
          <img src="./img/3.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <img src="./img/4.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <img src="./img/5.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <img src="./img/6.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <img src="./img/7.jpg" alt="">
        </a>
      </li>
    </ul>

    <div class="prev-next">
      <a href="javascript:;" id="prev">〈</a>
      <a href="javascript:;" id="next">〉</a>
    </div>

    <!-- 小圆点 -->
    <div class="dot">
      <a href="javascript:;" class="active"></a>
      <a href="javascript:;"></a>
      <a href="javascript:;"></a>
      <a href="javascript:;"></a>
      <a href="javascript:;"></a>
    </div>
  </div>

  <script>
    // 获取小圆点
    const dots = Array.from(document.querySelectorAll(".dot a"));
    const imgArr = Array.from(document.querySelectorAll(".img-list li"))



    document.addEventListener('click', (event) => {
      const index = dots.indexOf(event.target);

      if (index !== -1) {
        changeImg(index);

      }
    })
    const toggleChange = (function () {
      let timer = null;
      return () => {
        if (timer === null) {
          timer = setTimeout(function auto() {
            changeImg("next");
            timer = setTimeout(auto, 3000)
          }, 3000)
        } else {
          clearTimeout(timer);
          timer = null;
        }
      }
    })()

    toggleChange()

    // 鼠标移入不切换图片
    const outer = document.getElementsByClassName("outer")[0];
    outer.onmouseenter = function () {
      toggleChange();
    }
    outer.onmouseleave = () => {
      toggleChange();
    }
    // 点击按钮切换图片
    const prev = document.getElementById("prev");
    const next = document.getElementById("next");



    prev.onclick = function () {
      changeImg("prev");
    }
    next.onclick = function () {
      changeImg("next");
    }

    function changeImg(dir) {

      // 获取当前显示的图片
      const current = document.querySelector(".img-list .current");




      // 获取下一张图片
      let next;
      if (dir === "next") {
        next = current.nextElementSibling ||
          imgArr[0];
      } else if (dir === "prev") {
        next = current.previousElementSibling || imgArr.at(-1);
      } else if (typeof dir === "number") {//传的索引
        next = imgArr[dir];


      }

      // 获取当前要现实的图片的索引
      const index = imgArr.indexOf(next);

      // 切换显示状态
      current.classList.remove("current")
      next.classList.add("current")

      // 切换active
      const currentActive = document.querySelector(".active");
      currentActive.classList.remove("active");
      // 获取当前要显示的小圆点
      dots[index].classList.add("active");

    }
  </script>
</body>

</html>