0111 轮播图翻页按钮和鼠标事件

以老师的dom为基础写的作业
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>轮播图</title>
    <link rel="stylesheet" href="banner/style.css" />
  </head>
  <body>
    <div class="container">
      <!-- 1. 图片组 -->
      <nav class="imgs">
        <a href="#"
          ><img src="banner/banner1.jpg" alt="" data-index="1" class="active"
        /></a>
        <a href="#"><img src="banner/banner2.jpg" alt="" data-index="2" /></a>
        <a href="#"><img src="banner/banner3.jpg" alt="" data-index="3" /></a>
        <a href="#"><img src="banner/banner4.jpg" alt="" data-index="4" /></a>
      </nav>
      <!-- 2. 图片小按钮 -->
      <nav class="btns">
        <!-- 这些小按钮应该根据图片数量自动生成 -->
        <!-- <a href="" data-index="1" class="active"></a>
        <a href="" data-index="2"></a>
        <a href="" data-index="3"></a>
        <a href="" data-index="4"></a> -->
      </nav>
      <!-- 3. 翻页 -->
      <nav class="skip">
        <a href="#" class="prev">&lt;</a>
        <a href="#" class="next">&gt;</a>
      </nav>
    </div>
    <script>
      // 所有图片
      const imgs = document.querySelectorAll(".container > .imgs img");
      // 按钮组
      const btnGroup = document.querySelector(".container > .btns");
      // 翻页按钮
      const skip = document.querySelector(".container > .skip");
      // 创建出一组与图片数量对应的小按钮
      (function autoCreateBtns(ele, imgLength) {
        const frag = document.createDocumentFragment();
        for (let i = 0; i < imgLength; i++) {
          const a = document.createElement("a");
          a.href = "#";
          a.dataset.index = i + 1;
          if (i === 0) a.classList.add("active");
          frag.appendChild(a);
        }
        ele.appendChild(frag);
      })(btnGroup, imgs.length);
      // 调用创建小按钮的函数
      //autoCreateBtns(btnGroup, imgs.length);
      // 为刚刚生成的小按钮们添加点击事件
      const btns = document.querySelectorAll(".container > .btns > *");
      // 下面声明二个公共函数
      // 1. 获取激活的元素
      function getActiveEle(eles) {
        let activities = [...eles].filter((img) =>
          img.classList.contains("active")
        );
        return activities.shift();
      }
      // 2. 设置激活的元素,根据按钮索引更新正在显示的图片
      function setActiveEle(btnIndex) {
        [imgs, btns].forEach((arr) => {
          // 将之前的状态全部重置到初始化(清空)
          getActiveEle(arr).classList.remove("active");
          arr.forEach((item) => {
            if (item.dataset.index === btnIndex) {
              console.log(item);
              item.classList.add("active");
            }
          });
        });
      }
      // 为每一个小按钮添加事件
      // btns.forEach((btn) =>
      //   btn.addEventListener("click", (ev) =>
      //     setActiveEle(ev.target.dataset.index)
      //   )
      // );
      btnGroup.addEventListener("click", (ev) =>
        setActiveEle(ev.target.dataset.index)
      );
      // btns.forEach(function (btn) {
      //   btn.onclick = function (ev) {
      //     setActiveEle(ev.target.dataset.index);
      //   };
      // });
      // const btns =
      //   作业:
      //   1. 为翻页按钮添加功能
      skip.addEventListener("click", (ev) => {
        let activeIndex = getActiveEle(imgs).dataset.index;
        if (ev.target.className === "prev") {
          console.log("点击了上一个");
          // 获取当前激活的图片的dataindex,如果dataindex=1,重置dataindex=5
          // 激活dataindex-1的图片为激活,
          if (activeIndex == 1) activeIndex = 5;
          activeIndex--;
        } else {
          // 获取当前激活的图片的dataindex,如果dataindex=4,重置dataindex=1
          // 激活dataindex+1的图片为激活,
          if (activeIndex == 4) activeIndex = 0;
          activeIndex++;
        }
        setActiveEle(`${activeIndex}`);
      });
      //   2. 当鼠标移出时,图片的每隔2秒的自动播放,当鼠标移入时自动停止播放
      // mouseenter , mouseleave 事件来做
      // mouseout带了子元素,弃用
      let imgGroup = document.querySelector(".container");
      // const ev = new Event("click");
      const nextBtn = document.querySelector(".container .next");
      let intervalID;
      mouseOutHandler();
      function mouseOverHandler() {
        console.log("鼠标移入");
        // 清理自动点击
        clearInterval(intervalID);
      }
      function mouseOutHandler() {
        console.log("鼠标移出");
        intervalID = setInterval("nextBtn.click()", 2000);
      }
      imgGroup.addEventListener("mouseleave", mouseOutHandler);
      imgGroup.addEventListener("mouseenter", mouseOverHandler);
      //   3. 上节课的选项卡, 懒加载二选一
    </script>
  </body>
</html>
更多相关文章

随机推荐
