search

博客列表 >轮播图实现

轮播图实现

橙絮圆
橙絮圆原创
2021年07月17日 17:05:05814浏览

轮播图

作业标题：0715作业
作业内容：模仿课堂源码, 自己动手试着完成轮播图

  • 轮播图

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.   <title>轮播图</title>
    8.   <link rel="stylesheet" href="style.css" />
    9. </head>
    10. <body>
    11.   <div class="container">
    12.     <!--1. 图片组 -->
    13.     <div class="img-group"></div>
    14.     <img src="" alt="" />
    15.     <!-- 2.图片下部的小按钮 -->
    16.     <div class="btn-group"></div>
    17.     <!-- 3.翻页按钮 -->
    18.     <div class="skip">
    19.       <a class="prev" onclick="prevImg()">&lt;</a>
    20.       <a class="next" onclick="nextImg()">&gt;</a>
    21.     </div>
    22.   </div>
    23.   <script>
    24.     const banners = [
    25.       "banner/images/banner1.jpg",
    26.       "banner/images/banner2.jpg",
    27.       "banner/images/banner3.jpg",
    28.       "banner/images/banner4.jpg",
    29.     ];
    30.     //图片组
    31.     const imgGroup = document.querySelector(".container > .img-group");
    32.     //按钮组
    33.     const btnGroup = document.querySelector(".container > .btn-group");
    34.     //load:窗口加载完成自动执行：自动将所有轮播图加载出来，并自动生成与轮播图数量相同的小按钮
    35.     window.onload = () => {
    36.       //1.生成轮播图所有图片
    37.       createImgs(imgGroup, banners.length);
    38.       //2.生成与轮播图数量对应的小按钮
    39.       createBtns(btnGroup, banners.length);
    40.     };
    41.     //生成图片
    43.     function createImgs(parent, length) {
    44.       //正确的做法，应该是将所有图片，先在内存中创建，然后统一的插入到页面中,这样就只需要渲染一次
    45.       //文档片断元素
    46.       const frag = document.createDocumentFragment();
    47.       for (let i = 0; i < length; i++) {
    48.         const img = document.createElement("img");
    49.         img.src = banners[i];
    50.         img.alt = `banner${i + 1}`;
    51.         //为每一张图片添加一个自定义属性"data-index",用它与小按钮进行绑定
    52.         img.dataset.index = `${i + 1}`;
    53.         if (i === 0) img.classList.add("active");
    54.         //内容中执行了四次
    55.         frag.append(img);
    56.       }
    57.       //页面中只渲染了一次，效率大幅提高
    58.       parent.append(frag);
    59.     }
    60.     //生成按钮
    61.     function createBtns(parent, length) {
    62.       //文档片断元素
    63.       const frag = document.createDocumentFragment();
    64.       for (let i = 0; i < length; i++) {
    65.         const span = document.createElement("span");
    67.         //为每一张图片添加一个自定义属性"data-index",用它与小按钮进行绑定
    68.         span.dataset.index = `${i + 1}`;
    69.         if (i === 0) span.classList.add("active");
    70.         //内容中执行了四次
    71.         span.onclick = showImgs;
    72.         frag.append(span);
    73.       }
    74.       //页面中只渲染了一次，效率大幅提高
    75.       parent.append(frag);
    76.     }
    78.     //按钮事件
    79.     function showImgs(ev) {
    80.       //1.获取所有图片和按钮
    81.       const imgArr = imgGroup.querySelectorAll("img");
    82.       const btnArr = btnGroup.querySelectorAll("span");
    84.       //2.因为我们要根据用户的点击确定当前应该显示哪一个，所以应该将之前的激活全部取消掉
    85.       //但是我们又不知道当前是哪个处于激活状态，全部过一遍
    86.       // btnArr.forEach((item) => {
    87.       //   if (item.classList.contains("active")) item.classList.remove("active");
    88.       // });
    89.       // imgArr.forEach((item) => {
    90.       //   if (item.classList.contains("active")) item.classList.remove("active");
    91.       // });
    92.       //将上面两段代码合并
    93.       [btnArr, imgArr].forEach((items) => {
    94.         items.forEach((item) => {
    95.           if (item.classList.contains("active"))
    96.             item.classList.remove("active");
    97.         });
    98.         //3.再给当前正在点击的按钮添加激活，然后再根据当前的按钮确定应该显示哪一张图片
    99.         ev.target.classList.add("active");
    100.         imgArr.forEach((img) => {
    101.           //这张应该显示的图片的data-index应该与按钮的data-index相等，就显示出来
    102.           if (ev.target.dataset.index === img.dataset.index) {
    103.             img.classList.add("active");
    104.           }
    105.         });
    106.       });
    107.     }
    109.     //向前翻页事件
    110.     function prevImg() {
    111.       //1.当前的图片和当前的按钮
    112.       const currentImg = imgGroup.querySelector("img.active");
    113.       const currentBtn = btnGroup.querySelector("span.active");
    115.       //2.去掉当前图片和按钮的激活方式
    116.       currentImg.classList.remove("active");
    117.       currentBtn.classList.remove("active");
    119.       //3.获取当前图片和按钮的前一个兄弟元素
    120.       const prevImg = currentImg.previousElementSibling;
    121.       const BtnImg = currentBtn.previousElementSibling;
    123.       //4.判断，如果存在前一张图片，就设置为激活
    124.       if (prevImg !== null && BtnImg !== null) {
    125.         prevImg.classList.add("active");
    126.         BtnImg.classList.add("active");
    127.       } else {
    128.         //将最后一张图片设置为激活显示，实现循环显示
    129.         imgGroup.lastElementChild.classList.add("active");
    130.         btnGroup.lastElementChild.classList.add("active");
    131.       }
    132.     }
    134.     //向后翻页事件
    135.     function nextImg() {
    136.       //1.当前的图片和当前的按钮
    137.       const currentImg = imgGroup.querySelector("img.active");
    138.       const currentBtn = btnGroup.querySelector("span.active");
    140.       //2.去掉当前图片和按钮的激活方式
    141.       currentImg.classList.remove("active");
    142.       currentBtn.classList.remove("active");
    144.       //3.获取当前图片和按钮的前一个兄弟元素
    145.       const nextImg = currentImg.nextElementSibling;
    146.       const nextBtn = currentBtn.nextElementSibling;
    148.       //4.判断，如果存在前一张图片，就设置为激活
    149.       if (nextImg !== null && nextBtn !== null) {
    150.         nextImg.classList.add("active");
    151.         nextBtn.classList.add("active");
    152.       } else {
    153.         //将最后一张图片设置为激活显示，实现循环显示
    154.         imgGroup.firstElementChild.classList.add("active");
    155.         btnGroup.firstElementChild.classList.add("active");
    156.       }
    157.     }
    159.     //自动播放
    160.     //事件派发器dispatchEvent
    161.     let timer = null;
    163.     let clickEvent = new Event("click");
    165.     const contains = document.querySelector(".container");
    166.     //鼠标移入时停止自动播放，移出时自动播放
    167.     contains.addEventListener("mouseover", stopPlay);
    168.     contains.addEventListener("mouseout", autoPlay);
    169.     //自动播放
    170.     function autoPlay(ev) {
    171.       //ev:事件对象，在方法总是有效的
    172.       timer = setInterval((ev) => {
    173.         document
    174.           .querySelector(".skip .next")
    175.           .dispatchEvent(clickEvent, nextImg);
    176.       }, 2000);
    177.     }
    178.     //自动停止
    179.     function stopPlay() {
    180.       clearInterval(timer);
    181.     }
    182.   </script>
    183. </body>
    184. </html>

    轮播图

上一条：HTML 用户表单下一条：表单的基础知识
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多