JS+HTML+CSS轮播图代码（记事本）

MISSn270

已于 2023-06-07 15:52:35 修改

阅读量150

点赞数

分类专栏：记事本文章标签：前端

于 2023-06-07 15:25:33 首次发布

本文链接：https://blog.csdn.net/MISSn270/article/details/131088749

版权

记事本专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这段代码展示了如何使用CSS和JavaScript创建一个带有导航点的滑动Banner。当鼠标悬停在导航点上时，Banner图片会平滑过渡到对应位置。同时，有一个定时器功能，每4秒自动切换到下一张图片。

摘要由CSDN通过智能技术生成

<link rel="stylesheet" href="./Untitled-1.css" />
    <style>
      #banner {
        width: 700px;
        border: 3px solid red;
        overflow: hidden;
        position: relative;
      }
      #banner > ul {
        position: absolute;
        bottom: 10px;
        left: 50%;
        display: flex;
        transform: translateX(-50%);
      }
      #banner > ul > li {
        width: 16px;
        height: 16px;
        background-color: rgb(177, 174, 174);
        margin: 0 5px;
        border-radius: 50%;
      }
      #banner > ul > li.active {
        background-color: #0aa1ed;
      }
      #banner > div {
        display: flex;
        transition: 0.3s;
        /* transform: translateX(-100%); */
      }
      #banner > div > img {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="banner">
      <div style="transform: translateX(0%)">
        <img data-x="0%" src="imgs/banner1.png" class="active" alt="" />
        <img src="imgs/banner2.png" alt="" />
        <img src="imgs/banner3.png" alt="" />
        <img src="imgs/banner4.png" alt="" />
      </div>
      <ul>
        <li class="active" data-x="0%"></li>
        <li data-x="-100%"></li>
        <li data-x="-200%"></li>
        <li data-x="-300%"></li>
      </ul>
    </div>

    <script>
      const x = document.querySelectorAll("#banner li");
      x.forEach((li) => {
        li.onmouseover = function () {
          x.forEach((li) => {
            li.classList.remove("active");
          });
          this.classList.add("active");

          const xz = this.dataset.x; // data-x

          const div = document.querySelector("#banner>div");

          div.style.transform = `translateX(${xz})`;
        };
      });
    </script>

可以自动运行的代码

      const x = document.querySelectorAll("#banner li");
      x.forEach((li) => {
        li.onmouseover = function () {
          x.forEach((li) => {
            li.classList.remove("active");
          });
          this.classList.add("active");

          const xz = this.dataset.x; // data-x

          const div = document.querySelector("#banner>div");

          div.style.transform = `translateX(${xz})`;
        };
      });

      // 定时器切换
      setTimeout(() => {
        const live = document.querySelector("#box li.active");
        // next 写一个 element 元素 sibling 兄弟
        const li_next = live.nextElementSibling;
        // 如果下一个元素是存在的
        if (li_next) {
          // 触发 鼠标悬浮事件上绑定的函数
          li_next.onmouseover();
        } else {
          // 找到兄弟元素中第一个 触发
          live.previousElement.children[0].onmouseover();
        }
      }, 4000);