轮播图与懒加载

轮播图代码如下：

  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>

运行结果：
懒加载结果

更多相关文章

  1. Java反射机制：跟着代码学反射
  2. 下载10m/s！不限速阿里云网盘如何获取注册邀请码？
  3. 初识 jQuery 与$()工厂函数的四种用法，四种好用的 getter/setter
  4. 使用原生 js 实现选项卡、一键更换背景图片、图片懒加载和轮播图
  5. 面向对象封装，继承，加载器
  6. 【重磅】吴恩达最新的机器学习书籍更新啦！
  7. js 急速入门之六（classList，dataset对象，选项卡，一键换肤，图片懒加载，
  8. Java 队列同步器框架 AQS 实现原理
  9. Android(安卓)分享实现，微信、微博、腾讯 不同分享方式不同内容

随机推荐

  1. Android开发之获取常用android设备参数信
  2. Android 开发中的一些小技巧
  3. 如何让EditText不自动获取焦点
  4. Android开机自动启动程序设置
  5. error: Error retrieving parent for ite
  6. android中UI相关样式控制
  7. android电话拨号器源代码
  8. android RadioGroup的使用
  9. edittext 随文字换行 而高度增加
  10. Android的加速感应器开发一个控制铁球滚