Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 轮播图与懒加载
Blogger Information
Blog 18
fans 0
comment 0
visits 15987
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
轮播图与懒加载
沉寂的博客
Original
713 people have browsed it

轮播图与懒加载

轮播图代码如下：

  1. <html lang="en">
  2.   <head>
  3.     <meta charset="UTF-8" />
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  5.     <title>轮播图</title>
  6.     <link rel="stylesheet" href="banner/style1.css" />
  7.   </head>
  8.   <body>
  9.     <div class="container">
  10.       <nav class="imgs">
  11.         <a href="#"
  12.           ><img src="banner/banner1.jpg" alt="" class="active" data-index="1"
  13.         /></a>
  14.         <a href="#"><img src="banner/banner2.jpg" alt="" data-index="2" /></a>
  15.         <a href="#"><img src="banner/banner3.jpg" alt="" data-index="3" /></a>
  16.         <a href="#"><img src="banner/banner4.jpg" alt="" data-index="4" /></a>
  17.       </nav>
  18.       <nav class="btns">
  19.         <!-- 这些小按钮应该根据图片的数量自动生成的 -->
  20.         <!-- <a href="#" class="active" data-index="1"></a> -->
  21.         <!-- <a href="#" data-index="2"></a>
  22.         <a href="#" data-index="3"></a>
  23.         <a href="#" data-index="4"></a> -->
  24.       </nav>
  25.       <nav class="skip">
  26.         <a href="#" class="prev">&lt;</a>
  27.         <a href="#" class="next">&gt;</a>
  28.       </nav>
  29.     </div>
  1.     <script>
  2.       // 获取轮播图的盒子div
  3.       let container = document.querySelector(".container");
  4.       // 获取所有图片
  5.       const imgs = document.querySelectorAll(".container > .imgs img");
  6.       // 获取按钮
  7.       const btnGroup = document.querySelector(".container > .btns");
  8.       // 获取翻页按钮
  9.       const skip = document.querySelectorAll(".container > .skip > *");
  10.       // 创建出一组与图片数量对应的小按钮用函数来写
  11.       function createBtns(place, imgLength) {
  12.         // let htmStr=`<a href="#" data-index="${i+1}"></a>`;
  13.         // 用文档碎片创建HTML代码插入
  14.         const frag = document.createDocumentFragment();
  15.         // console.log(frag);
  16.         for (i = 0; i < imgLength; i++) {
  17.           const a = document.createElement("a");
  18.           a.href = "#";
  19.           a.dataset.index = i + 1;
  20.           if (i === 0) a.classList.add("active");
  21.           frag.appendChild(a);
  22.         }
  23.         place.appendChild(frag);
  24.       }
  25.       createBtns(btnGroup, imgs.length);
  26.       //   为创建好的小按钮添加事件用函数来写
  27.       const btns = document.querySelectorAll(".container > .btns > *");
  28.       //   console.log(btns);
  29.       //   小面声明两个公共函数
  30.       // 获取激活元素
  31.       function getActiveEle(els) {
  32.         let active = [...els].filter((img) => img.classList.contains("active"));
  33.         return active.shift();
  34.       }
  35.       // 设置激活的元素，根据索引显示正在显示的图片
  36.       function setActiveEle(btnIndex) {
  37.         [imgs, btns].forEach((arr) => {
  38.           // 将之前的状态全部重置到初始化状态
  39.           //   console.log(arr);
  41.           getActiveEle(arr).classList.remove("active");
  42.           arr.forEach((item) => {
  43.             console.log(item);
  44.             if (item.dataset.index === btnIndex) {
  45.               item.classList.add("active");
  46.             }
  47.           });
  48.         });
  49.       }
  50.       //   setActiveEle();
  51.       // 为每一个小按钮添加事件
  52.       btns.forEach((btn) =>
  53.         btn.addEventListener("click", (ev) =>
  54.           setActiveEle(ev.target.dataset.index)
  55.         )
  56.       );
  57.       //   console.log([...skip][0]);
  58.       [...skip][0].addEventListener("click", function (ev) {
  59.         console.log(ev.target);
  60.       });
  61.       // 实现自动播放
  63.     </script>

运行结果
轮播结果

懒加载

懒加载代码如下：

  1. <html lang="en">
  2.   <head>
  3.     <meta charset="UTF-8" />
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  5.     <title>懒加载</title>
  6.     <style>
  7.       * {
  8.         margin: 0;
  9.         padding: 0;
  10.         box-sizing: border-box;
  11.       }
  12.       .container {
  13.         display: grid;
  14.         grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  15.         gap: 10px;
  16.         width: 500px;
  17.         margin: 0 auto;
  18.       }
  19.       .container > img {
  20.         width: 100%;
  21.       }
  22.     </style>
  23.   </head>
  24.   <body>
  25.     <div class="container">
  26.       <img src="images/temp.jpg" alt="" data-src="images/img-1.jpg" />
  27.       <img src="images/temp.jpg" alt="" data-src="images/img-2.jpg" />
  28.       <img src="images/temp.jpg" alt="" data-src="images/img-3.jpg" />
  29.       <img src="images/temp.jpg" alt="" data-src="images/img-4.jpg" />
  30.       <img src="images/temp.jpg" alt="" data-src="images/img-5.jpg" />
  31.       <img src="images/temp.jpg" alt="" data-src="images/img-6.jpg" />
  32.       <img src="images/temp.jpg" alt="" data-src="images/img-7.jpg" />
  33.       <img src="images/temp.jpg" alt="" data-src="images/img-8.jpg" />
  34.       <img src="images/temp.jpg" alt="" data-src="images/img-9.jpg" />
  35.       <img src="images/temp.jpg" alt="" data-src="images/img-10.jpg" />
  36.       <img src="images/temp.jpg" alt="" data-src="images/img-11.jpg" />
  37.       <img src="images/temp.jpg" alt="" data-src="images/img-12.jpg" />
  38.       <img src="images/temp.jpg" alt="" data-src="images/img-13.jpg" />
  39.       <img src="images/temp.jpg" alt="" data-src="images/img-14.jpg" />
  40.       <img src="images/temp.jpg" alt="" data-src="images/img-15.jpg" />
  41.       <img src="images/temp.jpg" alt="" data-src="images/img-16.jpg" />
  42.       <img src="images/temp.jpg" alt="" data-src="images/img-17.jpg" />
  43.       <img src="images/temp.jpg" alt="" data-src="images/img-18.jpg" />
  44.       <img src="images/temp.jpg" alt="" data-src="images/img-19.jpg" />
  45.       <img src="images/temp.jpg" alt="" data-src="images/img-20.jpg" />
  46.       <img src="images/temp.jpg" alt="" data-src="images/img-21.jpg" />
  47.       <img src="images/temp.jpg" alt="" data-src="images/img-22.jpg" />
  48.       <img src="images/temp.jpg" alt="" data-src="images/img-23.jpg" />
  49.       <img src="images/temp.jpg" alt="" data-src="images/img-24.jpg" />
  50.       <img src="images/temp.jpg" alt="" data-src="images/img-25.jpg" />
  51.       <img src="images/temp.jpg" alt="" data-src="images/img-26.jpg" />
  52.       <img src="images/temp.jpg" alt="" data-src="images/img-27.jpg" />
  53.       <img src="images/temp.jpg" alt="" data-src="images/img-28.jpg" />
  54.       <img src="images/temp.jpg" alt="" data-src="images/img-29.jpg" />
  55.       <img src="images/temp.jpg" alt="" data-src="images/img-30.jpg" />
  56.       <img src="images/temp.jpg" alt="" data-src="images/img-31.jpg" />
  57.       <img src="images/temp.jpg" alt="" data-src="images/img-32.jpg" />
  58.       <img src="images/temp.jpg" alt="" data-src="images/img-33.jpg" />
  59.       <img src="images/temp.jpg" alt="" data-src="images/img-34.jpg" />
  60.       <img src="images/temp.jpg" alt="" data-src="images/img-35.jpg" />
  61.       <img src="images/temp.jpg" alt="" data-src="images/img-36.jpg" />
  62.       <img src="images/temp.jpg" alt="" data-src="images/img-37.jpg" />
  63.       <img src="images/temp.jpg" alt="" data-src="images/img-38.jpg" />
  64.       <img src="images/temp.jpg" alt="" data-src="images/img-39.jpg" />
  65.       <img src="images/temp.jpg" alt="" data-src="images/img-40.jpg" />
  66.       <img src="images/temp.jpg" alt="" data-src="images/img-41.jpg" />
  67.       <img src="images/temp.jpg" alt="" data-src="images/img-42.jpg" />
  68.       <img src="images/temp.jpg" alt="" data-src="images/img-43.jpg" />
  69.       <img src="images/temp.jpg" alt="" data-src="images/img-44.jpg" />
  70.       <img src="images/temp.jpg" alt="" data-src="images/img-45.jpg" />
  71.       <img src="images/temp.jpg" alt="" data-src="images/img-46.jpg" />
  72.       <img src="images/temp.jpg" alt="" data-src="images/img-47.jpg" />
  73.       <img src="images/temp.jpg" alt="" data-src="images/img-48.jpg" />
  74.       <img src="images/temp.jpg" alt="" data-src="images/img-49.jpg" />
  75.       <img src="images/temp.jpg" alt="" data-src="images/img-50.jpg" />
  76.       <img src="images/temp.jpg" alt="" data-src="images/img-51.jpg" />
  77.       <img src="images/temp.jpg" alt="" data-src="images/img-52.jpg" />
  78.       <img src="images/temp.jpg" alt="" data-src="images/img-53.jpg" />
  79.       <img src="images/temp.jpg" alt="" data-src="images/img-54.jpg" />
  80.       <img src="images/temp.jpg" alt="" data-src="images/img-55.jpg" />
  81.       <img src="images/temp.jpg" alt="" data-src="images/img-56.jpg" />
  82.       <img src="images/temp.jpg" alt="" data-src="images/img-57.jpg" />
  83.       <img src="images/temp.jpg" alt="" data-src="images/img-58.jpg" />
  84.       <img src="images/temp.jpg" alt="" data-src="images/img-59.jpg" />
  85.       <img src="images/temp.jpg" alt="" data-src="images/img-60.jpg" />
  86.       <img src="images/temp.jpg" alt="" data-src="images/img-61.jpg" />
  87.       <img src="images/temp.jpg" alt="" data-src="images/img-62.jpg" />
  88.       <img src="images/temp.jpg" alt="" data-src="images/img-63.jpg" />
  89.       <img src="images/temp.jpg" alt="" data-src="images/img-64.jpg" />
  90.       <img src="images/temp.jpg" alt="" data-src="images/img-65.jpg" />
  91.       <img src="images/temp.jpg" alt="" data-src="images/img-66.jpg" />
  92.       <img src="images/temp.jpg" alt="" data-src="images/img-67.jpg" />
  93.       <img src="images/temp.jpg" alt="" data-src="images/img-68.jpg" />
  94.       <img src="images/temp.jpg" alt="" data-src="images/img-69.jpg" />
  95.       <img src="images/temp.jpg" alt="" data-src="images/img-70.jpg" />
  96.     </div>
  1. <script>
  2.       // 懒加载主要用到一下知识点
  3.       // 视口高度
  4.       //   let viewHeight = document.documentElement.clientHeight;
  5.       //   滚动高度
  6.       window.onscroll = (en) => {
  7.         console.log(document.documentElement.scrollTop);
  8.       };
  9.       //   图片距离文档顶部的偏移量（img.offsetTop）小于可视区高度与滚动高度之间的和表示进入可视区
  10.       //   获取所有的图片元素
  11.       const imgs = document.querySelectorAll(".container img");
  12.       console.log(imgs);
  13.       //   获取可视高度
  14.       const viewHeight = document.documentElement.clientHeight;
  16.       //   写一个懒加载的函数实现懒加载
  17.       window.addEventListener("scroll", ljzLoad);
  18.     //   页面加载完成后加载图片
  19.       window.addEventListener("load", ljzLoad);
  20.       function ljzLoad() {
  21.         // 获取滚动高度
  23.         let scrollHeight = document.documentElement.scrollTop;
  24.         console.log(scrollHeight);
  25.         imgs.forEach((img) => {
  26.           if (img.offsetTop < viewHeight + scrollHeight) {
  27.             img.src = img.dataset.src;
  28.           }
  29.         });
  30.       }
  31.     </script>

运行结果：
懒加载结果

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