原生轮播图

<!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>轮播图</title>
    <style>
      /* 通用样式 */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      li {
        list-style: none;
      }
      a {
        text-decoration: none;
      }
      /* 容器样式 */
      .container {
        /* border: 1px solid; */
        width: 90%;
        height: 20rem;
        position: relative;
        top: 2rem;
        margin: auto;
      }
      /* 按钮组样式 */
      .container > .btnsGroup {
        width: 10rem;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
      }
      .container > .btnsGroup > a {
        display: inline-block;
        border: 0.5rem solid gray;
        border-radius: 50%;
        margin: 0.5rem;
      }
      .container > .btnsGroup > a:hover {
        cursor: pointer;
      }
      .container > .btnsGroup > .active {
        border-color: black;
      }
      /* 左右按钮样式 */
      .container > .changeimgs > span {
        position: absolute;
        top: 7.5rem;
        display: block;
        /* border: 1px solid; */
        width: 3rem;
        height: 5rem;
        text-align: center;
        line-height: 5rem;
        background-color: ghostwhite;
        font-weight: bolder;
        opacity: 0.3;
      }
      .container > .changeimgs > .next {
        right: 0;
      }
      /* 图片样式 */
      .container > .imgsGroup img {
        display: none;
        width: 100%;
        height: 20rem;
      }
      .container > .imgsGroup > .active {
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- 图片组 -->
      <div class="imgsGroup"></div>
      <!-- 按钮组 -->
      <div class="btnsGroup"></div>
      <!-- 左右按钮 -->
      <div class="changeimgs">
        <span class="prev" onclick="prev(this);">&lt;</span>
        <span class="next" onclick="next();">&gt;</span>
      </div>
    </div>
    <script>
      let imgs = [
        "images/banner1.jpg",
        "images/banner2.jpg",
        "images/banner3.jpg",
        "images/banner4.jpg",
      ];
      // 按钮组
      let btnsGroup = document.querySelector(".btnsGroup");
      // 图片组
      let imgsGroup = document.querySelector(".imgsGroup");
      //load,窗口加载完成后自动执行
      window.onload = function () {
        createImgs(imgsGroup, imgs.length);
        createBtns(btnsGroup, imgs.length);
      };
      //插入图片
      function createImgs(parent, length) {
        //创建临时的文档片段，把图片先插入文档片段，然后最终一次性渲染页面
        let frag = document.createDocumentFragment();
        for (let i = 0; i < length; i++) {
          let im = document.createElement("img");
          if (i == 0) {
            im.classList.add("active");
          }
          im.dataset.index = `${i + 1}`;
          im.src = imgs[i];
          frag.append(im);
        }
        imgsGroup.append(frag);
      }
      //插入按钮
      function createBtns(parent, length) {
        //创建临时的文档片段，把按钮先插入文档片段，然后最终一次性渲染页面
        let frag = document.createDocumentFragment();
        for (let i = 0; i < length; i++) {
          let btn = document.createElement("a");
          if (i == 0) {
            btn.classList.add("active");
          }
          btn.dataset.index = i + 1;
          btn.onclick = showImgs;
          frag.append(btn);
        }
        btnsGroup.append(frag);
      }
      //点击小按钮切换图片
      function showImgs(ev) {
        let imgArr = imgsGroup.querySelectorAll("img");
        let btnArr = btnsGroup.querySelectorAll("a");
        btnArr.forEach(function (item) {
          if (item.classList.contains("active"))
            item.classList.remove("active");
        });
        imgArr.forEach(function (items) {
          if (items.classList.contains("active"))
            items.classList.remove("active");
          if (items.dataset.index == ev.target.dataset.index)
            items.classList.add("active");
        });
        ev.target.classList.add("active");
      }
      // 左边按钮
      function prev() {
        let currentImg = imgsGroup.querySelector("img.active");
        let currentBtn = btnsGroup.querySelector("a.active");
        currentImg.classList.remove("active");
        currentBtn.classList.remove("active");
        // 获取上一个兄弟元素，如果不为空就给他们active属性
        let prevImg = currentImg.previousElementSibling;
        let prevBtn = currentBtn.previousElementSibling;
        if (prevImg !== null && prevBtn !== null) {
          prevImg.classList.add("active");
          prevBtn.classList.add("active");
        } else {
          imgsGroup.querySelector("img:last-of-type").classList.add("active");
          btnsGroup.querySelector("a:last-of-type").classList.add("active");
        }
      }
      //右边按钮
      function next() {
        let currentImg = imgsGroup.querySelector("img.active");
        let currentBtn = btnsGroup.querySelector("a.active");
        currentImg.classList.remove("active");
        currentBtn.classList.remove("active");
        // 获取下一个兄弟元素，如果不为空，就给active属性
        let prevImg = currentImg.nextElementSibling;
        let prevBtn = currentBtn.nextElementSibling;
        if (prevImg !== null && prevBtn !== null) {
          prevImg.classList.add("active");
          prevBtn.classList.add("active");
        } else {
          imgsGroup.querySelector("img:first-of-type").classList.add("active");
          btnsGroup.querySelector("a:first-of-type").classList.add("active");
        }
      }
      //自动播放
      // 定时器，就是一个整数，用来标识一个定时任务
      let timer = null;
      let clickEvent = new Event("click");
      let container = document.querySelector(".container");
      container.addEventListener("mouseover", stopPlay);
      container.addEventListener("mouseout", startPlay);
      function startPlay(ev) {
        timer = setInterval(function () {
          document
            .querySelector(".changeimgs .next")
            .dispatchEvent(clickEvent, next);
        }, 2000);
      }
      function stopPlay() {
        clearInterval(timer);
      }
    </script>
  </body>
</html>
相关文章
