Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 0111 轮播图翻页按钮和鼠标事件
Blogger Information
Blog 15
fans 0
comment 0
visits 9201
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
0111 轮播图翻页按钮和鼠标事件
fanyigle_php
Original
672 people have browsed it

以老师的dom为基础写的作业

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>轮播图</title>
  7.     <link rel="stylesheet" href="banner/style.css" />
  8.   </head>
  9.   <body>
  10.     <div class="container">
  11.       <!-- 1. 图片组 -->
  12.       <nav class="imgs">
  13.         <a href="#"
  14.           ><img src="banner/banner1.jpg" alt="" data-index="1" class="active"
  15.         /></a>
  16.         <a href="#"><img src="banner/banner2.jpg" alt="" data-index="2" /></a>
  17.         <a href="#"><img src="banner/banner3.jpg" alt="" data-index="3" /></a>
  18.         <a href="#"><img src="banner/banner4.jpg" alt="" data-index="4" /></a>
  19.       </nav>
  20.       <!-- 2. 图片小按钮 -->
  21.       <nav class="btns">
  22.         <!-- 这些小按钮应该根据图片数量自动生成 -->
  23.         <!-- <a href="" data-index="1" class="active"></a>
  24.         <a href="" data-index="2"></a>
  25.         <a href="" data-index="3"></a>
  26.         <a href="" data-index="4"></a> -->
  27.       </nav>
  28.       <!-- 3. 翻页 -->
  29.       <nav class="skip">
  30.         <a href="#" class="prev">&lt;</a>
  31.         <a href="#" class="next">&gt;</a>
  32.       </nav>
  33.     </div>
  35.     <script>
  36.       // 所有图片
  37.       const imgs = document.querySelectorAll(".container > .imgs img");
  38.       // 按钮组
  39.       const btnGroup = document.querySelector(".container > .btns");
  40.       // 翻页按钮
  41.       const skip = document.querySelector(".container > .skip");
  43.       // 创建出一组与图片数量对应的小按钮
  44.       (function autoCreateBtns(ele, imgLength) {
  45.         const frag = document.createDocumentFragment();
  46.         for (let i = 0; i < imgLength; i++) {
  47.           const a = document.createElement("a");
  48.           a.href = "#";
  49.           a.dataset.index = i + 1;
  50.           if (i === 0) a.classList.add("active");
  51.           frag.appendChild(a);
  52.         }
  53.         ele.appendChild(frag);
  54.       })(btnGroup, imgs.length);
  55.       // 调用创建小按钮的函数
  56.       //autoCreateBtns(btnGroup, imgs.length);
  58.       // 为刚刚生成的小按钮们添加点击事件
  59.       const btns = document.querySelectorAll(".container > .btns > *");
  61.       // 下面声明二个公共函数
  62.       // 1. 获取激活的元素
  63.       function getActiveEle(eles) {
  64.         let activities = [...eles].filter((img) =>
  65.           img.classList.contains("active")
  66.         );
  68.         return activities.shift();
  69.       }
  70.       // 2. 设置激活的元素,根据按钮索引更新正在显示的图片
  71.       function setActiveEle(btnIndex) {
  72.         [imgs, btns].forEach((arr) => {
  73.           // 将之前的状态全部重置到初始化(清空)
  74.           getActiveEle(arr).classList.remove("active");
  75.           arr.forEach((item) => {
  76.             if (item.dataset.index === btnIndex) {
  77.               console.log(item);
  78.               item.classList.add("active");
  79.             }
  80.           });
  81.         });
  82.       }
  84.       // 为每一个小按钮添加事件
  85.       // btns.forEach((btn) =>
  86.       //   btn.addEventListener("click", (ev) =>
  87.       //     setActiveEle(ev.target.dataset.index)
  88.       //   )
  89.       // );
  91.       btnGroup.addEventListener("click", (ev) =>
  92.         setActiveEle(ev.target.dataset.index)
  93.       );
  94.       // btns.forEach(function (btn) {
  95.       //   btn.onclick = function (ev) {
  96.       //     setActiveEle(ev.target.dataset.index);
  97.       //   };
  98.       // });
  99.       // const btns =
  101.       //   作业:
  102.       //   1. 为翻页按钮添加功能
  104.       skip.addEventListener("click", (ev) => {
  105.         let activeIndex = getActiveEle(imgs).dataset.index;
  106.         if (ev.target.className === "prev") {
  107.           console.log("点击了上一个");
  109.           // 获取当前激活的图片的dataindex,如果dataindex=1,重置dataindex=5
  110.           // 激活dataindex-1的图片为激活,
  112.           if (activeIndex == 1) activeIndex = 5;
  113.           activeIndex--;
  114.         } else {
  115.           // 获取当前激活的图片的dataindex,如果dataindex=4,重置dataindex=1
  116.           // 激活dataindex+1的图片为激活,
  118.           if (activeIndex == 4) activeIndex = 0;
  119.           activeIndex++;
  120.         }
  121.         setActiveEle(`${activeIndex}`);
  122.       });
  123.       //   2. 当鼠标移出时,图片的每隔2秒的自动播放,当鼠标移入时自动停止播放
  124.       // mouseenter , mouseleave 事件来做
  125.       // mouseout带了子元素,弃用
  126.       let imgGroup = document.querySelector(".container");
  127.       // const ev = new Event("click");
  128.       const nextBtn = document.querySelector(".container .next");
  129.       let intervalID;
  130.       mouseOutHandler();
  131.       function mouseOverHandler() {
  132.         console.log("鼠标移入");
  134.         // 清理自动点击
  135.         clearInterval(intervalID);
  136.       }
  137.       function mouseOutHandler() {
  138.         console.log("鼠标移出");
  140.         intervalID = setInterval("nextBtn.click()", 2000);
  141.       }
  142.       imgGroup.addEventListener("mouseleave", mouseOutHandler);
  143.       imgGroup.addEventListener("mouseenter", mouseOverHandler);
  145.       //   3. 上节课的选项卡, 懒加载二选一
  146.     </script>
  147.   </body>
  148. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post