search

博客列表 >JavaScript:1.图片懒加载演示；2.轮播图为翻页按钮添加功能;

JavaScript:1.图片懒加载演示；2.轮播图为翻页按钮添加功能;

JiaJieChen
JiaJieChen原创
2021年04月13日 18:16:546331浏览

JavaScript:1.懒加载演示；2.轮播图为翻页按钮添加功能;

一.图片懒加载演示

关于高度 代码
视口高度 clientHeight
滚动高度 scrollTop
距离父级高度 offsetTop 

  1.  <script>
  2.       //首先拿到所有的图片
  3.       const img = document.querySelectorAll(".box img");
  4.       //然后拿到视口高度
  5.       const clientHeight = document.documentElement.clientHeight;
  7.       //创建懒加载函数回调
  8.       function layzyload() {
  9.         //创建滚动距离变量
  10.         let scrollTop = document.documentElement.scrollTop;
  12.         //用forEach遍历img
  13.         img.forEach((img) => {
  14.           //用if语句来判断这张图片的顶部距离它的父级的高度,是否小于视口高度与滚动距离之和
  15.           //offsetTop 图片距离父级的高度
  16.           if (img.offsetTop < clientHeight + scrollTop) {
  17.             //延迟函数 setTimeout
  18.             setTimeout(() => {
  19.               //延迟0.5秒替换显示图片的路径
  20.               img.src = img.dataset.src;
  21.             }, 500);
  22.           }
  23.         });
  24.       }
  26.       //创建监听滚动事件
  27.       //   scroll: 滚动事件,
  28.       window.addEventListener("scroll", layzyload);
  29.       //load：当页面加载完成后立即显示第一屏
  30.       window.addEventListener("load", layzyload);
  31.     </script>

二.轮播图为翻页按钮添加功能

代码块

  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.     <style>
  9.       @import url(lbt.css);
  10.     </style>
  11.   </head>
  12.   <body>
  13.     <div class="box">
  14.       <!-- 图片组 -->
  15.       <div class="imgs">
  16.         <a href=""
  17.           ><img src="banner/banner1.jpg" alt="" data-index="1" class="active"
  18.         /></a>
  19.         <a href=""><img src="banner/banner2.jpg" alt="" data-index="2" /></a>
  20.         <a href=""><img src="banner/banner3.jpg" alt="" data-index="3" /></a>
  21.         <a href=""><img src="banner/banner4.jpg" alt="" data-index="4" /></a>
  22.       </div>
  24.       <!-- 图片下方小按钮 -->
  25.       <div class="btns"></div>
  27.       <!-- 翻页按钮 -->
  28.       <div class="skip active">
  29.         <a href="" class="prev">&lt;</a>
  30.         <a href="" class="next">&gt;</a>
  31.       </div>
  33.       <script>
  34.         //拿到所有图片
  35.         const imgs = document.querySelectorAll(".box > .imgs img");
  36.         //拿到小按钮组
  37.         const btns = document.querySelector(".box > .btns");
  39.         //动态化创建小按钮组，轮播图片有多少张就有多少个按钮
  40.         function zdButton(ele, imgLength) {
  41.           //优化编程：按钮创造之后放到中介里面去，然后全部完成后放到页面中
  42.           //createDocumentFragment 方法 建立复用文档片段
  43.           const frag = document.createDocumentFragment();
  44.           for (let i = 0; i < imgLength; i++) {
  45.             //创建a链接
  46.             const a = document.createElement("a");
  47.             //设置a链接地址为空
  48.             a.href = "#";
  49.             //设置a链接自定义属性与图片自定义属性相符
  50.             a.dataset.index = i + 1;
  51.             //判断a链接激活样式
  52.             if (i === 0) a.classList.add("active");
  53.             // 将a链接传入frag复用文档片段中
  54.             frag.append(a);
  55.           }
  56.           //将复用文档片段传入ele行参中
  57.           ele.append(frag);
  58.         }
  59.         //调用函数传入按钮位置实参
  60.         zdButton(btns, imgs.length);
  62.         //为刚刚生成的小按钮添加点击事件
  63.         //获取到全部的小按钮赋值给常量btnsj
  64.         const btnsj = document.querySelectorAll(".box > .btns > *");
  66.         //建立两个公共函数
  67.         //获取激活的元素
  68.         function getActiveEle(eles) {
  69.           //contains 该方法是判断字符串中是否有子字符串，如果有为true，如果没有为false
  70.           let activeEles = [...eles].filter((ele) =>
  71.             ele.classList.contains("active")
  72.           );
  73.           //返回这个元素给函数
  74.           return activeEles[0];
  75.         }
  77.         // 设置激活的元素,根据按钮索引更新正在显示的图片
  78.         //   参数就是当前正在点击的按钮的索引
  79.         function setActiveEle(btnIndex) {
  80.           // 先将之前的激活的样式去掉
  81.           [imgs, btnsj].forEach((arr) => {
  82.             getActiveEle(arr).classList.remove("active");
  83.             //   再根据当前的的自定义索引来重新设置应该激活的按钮和图片
  84.             // 判断当前行参和实参索引是否相等如果相等重新传入active
  85.             arr.forEach((item) => {
  86.               if (item.dataset.index === btnIndex) {
  87.                 item.classList.add("active");
  88.               }
  89.             });
  90.           });
  91.         }
  92.         // 为按钮添加事件监听器
  93.         btnsj.forEach((btn) =>
  94.           btn.addEventListener("click", (ev) =>
  95.             setActiveEle(ev.target.dataset.index)
  96.           )
  97.         );
  99.         // 当前图片索引: 公共函数 getActiveEle()
  100.         let currentImgIndex = getActiveEle(imgs).dataset.index;
  102.         //轮播图翻页按钮功能设置
  103.         //拿到左右的翻页按钮
  104.         const skipleft = document.querySelector(".box > .skip >.prev");
  105.         const skipright = document.querySelector(".box > .skip >.next");
  107.         //拿到翻页按钮
  108.         const skip = document.querySelector(".box > .skip");
  110.         //首先去除左右两边翻页按钮的默认样式：preventDefault 禁用默认样式
  111.         skip.onclick = (ev) => {
  112.           ev.preventDefault();
  113.         };
  115.         //设置右边按钮点击一下data-index值就+1
  116.         let i = 1;
  117.         skipright.onclick = (ev) => {
  118.           if (i <= imgs.length) {
  119.             // console.log("1" + skipright.target);
  120.             skipright.dataset.index = i++;
  121.           } else {
  122.             i = 1;
  123.           }
  125.           [...skipright.children].forEach((item) =>
  126.             item.classList.remove("active")
  127.           );
  128.           ev.target.classList.add("active");
  130.           imgs.forEach((item) => item.classList.remove("active"));
  132.           [...imgs]
  133.             .filter((item) => item.dataset.index === ev.target.dataset.index)
  134.             .pop()
  135.             .classList.add("active");
  136.         };
  138.         //设置左边边按钮点击一下data-index值就-1
  139.         let b = 4;
  140.         skipleft.onclick = (ev) => {
  141.           if (b <= imgs.length && b > 0) {
  142.             // console.log("1" + skipright.target);
  143.             skipleft.dataset.index = b--;
  144.           } else {
  145.             b = 4;
  146.           }
  147.           [...skipleft.children].forEach((item) =>
  148.             item.classList.remove("active")
  149.           );
  150.           ev.target.classList.add("active");
  152.           imgs.forEach((item) => item.classList.remove("active"));
  154.           [...imgs]
  155.             .filter((item) => item.dataset.index === ev.target.dataset.index)
  156.             .pop()
  157.             .classList.add("active");
  158.         };
  160.         // 定时器
  161.         let timer = null;
  162.         // 创建自定义事件对象: 点击类型
  163.         let clickEvent = new Event("click");
  165.         // 为轮播图容器绑定鼠标事件
  166.         const container = document.querySelector(".box");
  167.         // 鼠标移入时,停止自动播放
  168.         container.addEventListener("mouseover", stopPlay, false);
  169.         // 鼠标移出时,自动播放
  170.         container.addEventListener("mouseout", autoPlay, false);
  172.         // 自动播放
  173.         function autoPlay(ev) {
  174.           // 创建一个每隔1秒自动触发的"间歇式定时器"
  175.           timer = setInterval(() => {
  176.             // 将自定义点击事件任意派发给"前进或后退"中的一个按钮即可,本例自动点击前进按钮
  177.             skip.querySelector(".next").dispatchEvent(clickEvent, skipright);
  178.           }, 1000);
  179.         }
  180.         // 页面加载完成开始播放
  181.         window.onload = () => {
  182.           autoPlay(1000);
  183.         };
  185.         // 自动停止播放
  186.         function stopPlay(ev) {
  187.           // 清除间隙定时器,结束自动播放
  188.           clearInterval(timer);
  189.         }
  190.       </script>
  191.     </div>
  192.   </body>
  193. </html>
上一条：作用域和闭包; 类与类的继承下一条：VUE之组件及传参方式
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多