收藏
天蓬老师批改状态：合格
老师批语：写得非常棒
| 关于高度 | 代码 |
|---|---|
| 视口高度 | clientHeight |
| 滚动高度 | scrollTop |
| 距离父级高度 | offsetTop |
<script>//首先拿到所有的图片const img = document.querySelectorAll(".box img");//然后拿到视口高度const clientHeight = document.documentElement.clientHeight;//创建懒加载函数回调function layzyload() {//创建滚动距离变量let scrollTop = document.documentElement.scrollTop;//用forEach遍历imgimg.forEach((img) => {//用if语句来判断这张图片的顶部距离它的父级的高度,是否小于视口高度与滚动距离之和//offsetTop 图片距离父级的高度if (img.offsetTop < clientHeight + scrollTop) {//延迟函数 setTimeoutsetTimeout(() => {//延迟0.5秒替换显示图片的路径img.src = img.dataset.src;}, 500);}});}//创建监听滚动事件// scroll: 滚动事件,window.addEventListener("scroll", layzyload);//load：当页面加载完成后立即显示第一屏window.addEventListener("load", layzyload);</script>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>轮播图</title><style>@import url(lbt.css);</style></head><body><div class="box"><!-- 图片组 --><div class="imgs"><a href=""><img src="banner/banner1.jpg" alt="" data-index="1" class="active"/></a><a href=""><img src="banner/banner2.jpg" alt="" data-index="2" /></a><a href=""><img src="banner/banner3.jpg" alt="" data-index="3" /></a><a href=""><img src="banner/banner4.jpg" alt="" data-index="4" /></a></div><!-- 图片下方小按钮 --><div class="btns"></div><!-- 翻页按钮 --><div class="skip active"><a href="" class="prev"><</a><a href="" class="next">></a></div><script>//拿到所有图片const imgs = document.querySelectorAll(".box > .imgs img");//拿到小按钮组const btns = document.querySelector(".box > .btns");//动态化创建小按钮组，轮播图片有多少张就有多少个按钮function zdButton(ele, imgLength) {//优化编程：按钮创造之后放到中介里面去，然后全部完成后放到页面中//createDocumentFragment 方法 建立复用文档片段const frag = document.createDocumentFragment();for (let i = 0; i < imgLength; i++) {//创建a链接const a = document.createElement("a");//设置a链接地址为空a.href = "#";//设置a链接自定义属性与图片自定义属性相符a.dataset.index = i + 1;//判断a链接激活样式if (i === 0) a.classList.add("active");// 将a链接传入frag复用文档片段中frag.append(a);}//将复用文档片段传入ele行参中ele.append(frag);}//调用函数传入按钮位置实参zdButton(btns, imgs.length);//为刚刚生成的小按钮添加点击事件//获取到全部的小按钮赋值给常量btnsjconst btnsj = document.querySelectorAll(".box > .btns > *");//建立两个公共函数//获取激活的元素function getActiveEle(eles) {//contains 该方法是判断字符串中是否有子字符串，如果有为true，如果没有为falselet activeEles = [...eles].filter((ele) =>ele.classList.contains("active"));//返回这个元素给函数return activeEles[0];}// 设置激活的元素,根据按钮索引更新正在显示的图片// 参数就是当前正在点击的按钮的索引function setActiveEle(btnIndex) {// 先将之前的激活的样式去掉[imgs, btnsj].forEach((arr) => {getActiveEle(arr).classList.remove("active");// 再根据当前的的自定义索引来重新设置应该激活的按钮和图片// 判断当前行参和实参索引是否相等如果相等重新传入activearr.forEach((item) => {if (item.dataset.index === btnIndex) {item.classList.add("active");}});});}// 为按钮添加事件监听器btnsj.forEach((btn) =>btn.addEventListener("click", (ev) =>setActiveEle(ev.target.dataset.index)));// 当前图片索引: 公共函数 getActiveEle()let currentImgIndex = getActiveEle(imgs).dataset.index;//轮播图翻页按钮功能设置//拿到左右的翻页按钮const skipleft = document.querySelector(".box > .skip >.prev");const skipright = document.querySelector(".box > .skip >.next");//拿到翻页按钮const skip = document.querySelector(".box > .skip");//首先去除左右两边翻页按钮的默认样式：preventDefault 禁用默认样式skip.onclick = (ev) => {ev.preventDefault();};//设置右边按钮点击一下data-index值就+1let i = 1;skipright.onclick = (ev) => {if (i <= imgs.length) {// console.log("1" + skipright.target);skipright.dataset.index = i++;} else {i = 1;}[...skipright.children].forEach((item) =>item.classList.remove("active"));ev.target.classList.add("active");imgs.forEach((item) => item.classList.remove("active"));[...imgs].filter((item) => item.dataset.index === ev.target.dataset.index).pop().classList.add("active");};//设置左边边按钮点击一下data-index值就-1let b = 4;skipleft.onclick = (ev) => {if (b <= imgs.length && b > 0) {// console.log("1" + skipright.target);skipleft.dataset.index = b--;} else {b = 4;}[...skipleft.children].forEach((item) =>item.classList.remove("active"));ev.target.classList.add("active");imgs.forEach((item) => item.classList.remove("active"));[...imgs].filter((item) => item.dataset.index === ev.target.dataset.index).pop().classList.add("active");};// 定时器let timer = null;// 创建自定义事件对象: 点击类型let clickEvent = new Event("click");// 为轮播图容器绑定鼠标事件const container = document.querySelector(".box");// 鼠标移入时,停止自动播放container.addEventListener("mouseover", stopPlay, false);// 鼠标移出时,自动播放container.addEventListener("mouseout", autoPlay, false);// 自动播放function autoPlay(ev) {// 创建一个每隔1秒自动触发的"间歇式定时器"timer = setInterval(() => {// 将自定义点击事件任意派发给"前进或后退"中的一个按钮即可,本例自动点击前进按钮skip.querySelector(".next").dispatchEvent(clickEvent, skipright);}, 1000);}// 页面加载完成开始播放window.onload = () => {autoPlay(1000);};// 自动停止播放function stopPlay(ev) {// 清除间隙定时器,结束自动播放clearInterval(timer);}</script></div></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
