简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >轮播图与懒加载

轮播图与懒加载

沉寂的博客
沉寂的博客原创
2021年02月19日 11:19:43697浏览

轮播图与懒加载

轮播图代码如下：

  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>

运行结果：
懒加载结果

上一条：《JS对象与流程控制》下一条：PHP基础: 字符串函数
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多