Correcting teacher:天蓬老师
Correction status:qualified
Teacher's comments:写得非常棒
关于高度 | 代码 |
---|---|
视口高度 | clientHeight |
滚动高度 | scrollTop |
距离父级高度 | offsetTop |
<script>
//首先拿到所有的图片
constimg=document.querySelectorAll(".box img");
//然后拿到视口高度
constclientHeight=document.documentElement.clientHeight;
//创建懒加载函数回调
functionlayzyload(){
//创建滚动距离变量
let scrollTop=document.documentElement.scrollTop;
//用forEach遍历img
img.forEach((img)=>{
//用if语句来判断这张图片的顶部距离它的父级的高度,是否小于视口高度与滚动距离之和
//offsetTop 图片距离父级的高度
if(img.offsetTop<clientHeight+scrollTop){
//延迟函数 setTimeout
setTimeout(()=>{
//延迟0.5秒替换显示图片的路径
img.src=img.dataset.src;
},500);
}
});
}
//创建监听滚动事件
// scroll: 滚动事件,
window.addEventListener("scroll",layzyload);
//load:当页面加载完成后立即显示第一屏
window.addEventListener("load",layzyload);
script>
lang="en">
charset="UTF-8"/>
http-equiv="X-UA-Compatible"content="IE=edge"/>
name="viewport"content="width=device-width, initial-scale=1.0"/>
轮播图 @importurl(lbt.css);
class="box">
class="imgs">href=""
>src="banner/banner1.jpg"alt=""data-index="1"class="active"
/>
href="">src="banner/banner2.jpg"alt=""data-index="2"/>
href="">src="banner/banner3.jpg"alt=""data-index="3"/>
href="">src="banner/banner4.jpg"alt=""data-index="4"/>
class="btns">//拿到所有图片
constimgs=document.querySelectorAll(".box > .imgs img");
//拿到小按钮组
constbtns=document.querySelector(".box > .btns");
//动态化创建小按钮组,轮播图片有多少张就有多少个按钮
functionzdButton(ele,imgLength){
//优化编程:按钮创造之后放到中介里面去,然后全部完成后放到页面中
//createDocumentFragment 方法 建立复用文档片段
constfrag=document.createDocumentFragment();
for(let i=0;i<imgLength;i++){
//创建a链接
consta=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);
//为刚刚生成的小按钮添加点击事件
//获取到全部的小按钮赋值给常量btnsj
constbtnsj=document.querySelectorAll(".box > .btns > *");
//建立两个公共函数
//获取激活的元素
functiongetActiveEle(eles){
//contains 该方法是判断字符串中是否有子字符串,如果有为true,如果没有为false
let activeEles=[...eles].filter((ele)=>
ele.classList.contains("active")
);
//返回这个元素给函数
returnactiveEles[0];
}
// 设置激活的元素,根据按钮索引更新正在显示的图片
// 参数就是当前正在点击的按钮的索引
functionsetActiveEle(btnIndex){
// 先将之前的激活的样式去掉
[imgs,btnsj].forEach((arr)=>{
getActiveEle(arr).classList.remove("active");
// 再根据当前的的自定义索引来重新设置应该激活的按钮和图片
// 判断当前行参和实参索引是否相等如果相等重新传入active
arr.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;
//轮播图翻页按钮功能设置
//拿到左右的翻页按钮
constskipleft=document.querySelector(".box > .skip >.prev");
constskipright=document.querySelector(".box > .skip >.next");
//拿到翻页按钮
constskip=document.querySelector(".box > .skip");
//首先去除左右两边翻页按钮的默认样式:preventDefault 禁用默认样式
skip.onclick=(ev)=>{
ev.preventDefault();
};
//设置右边按钮点击一下data-index值就+1
let 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值就-1
let 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=newEvent("click");
// 为轮播图容器绑定鼠标事件
constcontainer=document.querySelector(".box");
// 鼠标移入时,停止自动播放
container.addEventListener("mouseover",stopPlay,false);
// 鼠标移出时,自动播放
container.addEventListener("mouseout",autoPlay,false);
// 自动播放
functionautoPlay(ev){
// 创建一个每隔1秒自动触发的"间歇式定时器"
timer=setInterval(()=>{
// 将自定义点击事件任意派发给"前进或后退"中的一个按钮即可,本例自动点击前进按钮
skip.querySelector(".next").dispatchEvent(clickEvent,skipright);
},1000);
}
// 页面加载完成开始播放
window.onload=()=>{
autoPlay(1000);
};
// 自动停止播放
functionstopPlay(ev){
// 清除间隙定时器,结束自动播放
clearInterval(timer);
}