轮播图、懒加载 - 前端学习

轮播图

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>轮播图</title>
<link rel="stylesheet" href="banner/style.css" />
</head>
<body>
<div class="container">

<nav 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>
</nav>

<nav class="btns">

<!-- <a href="" data-index="1" class="active"></a>
<a href="" data-index="2"></a>
<a href="" data-index="3"></a>
<a href="" data-index="4"></a> -->
</nav>

<nav class="skip">
<a href="#" class="prev"><</a>
<a href="#" class="next">></a>
</nav>
</div>
<script>
// 获取所需元素
// 所有图片
const imgs = document.querySelectorAll(".container > .imgs img");
// 按钮组
const btnGroup = document.querySelector(".container > .btns");
// 翻页按钮
const skip = document.querySelector(".container > .skip");
// const skip = document.querySelectorAll(".container > .skip > *");
// 创建出一组与图片数量对应的小按钮
function autoCreateBtns(ele, imgLength) {
const frag = document.createDocumentFragment();
for (let i = 0; i < imgLength; i++) {
const a = document.createElement("a");
a.href = "#";
a.dataset.index = i + 1;
if (i === 0) a.classList.add("active");
frag.appendChild(a);
}
ele.appendChild(frag);
}
// 调用创建小按钮的函数
autoCreateBtns(btnGroup, imgs.length);
// 为刚刚生成的小按钮们添加点击事件
const btns = document.querySelectorAll(".container > .btns > *");
// 下面声明二个公共函数
// 1. 获取激活的元素
function getActiveEle(eles) {
let activities = [...eles].filter(img => img.classList.contains("active"));
return activities.shift();
}
// 2. 设置激活的元素,根据按钮索引更新正在显示的图片
function setActiveEle(btnIndex) {
[imgs, btns].forEach(arr => {
// 将之前的状态全部重置到初始化(清空)
getActiveEle(arr).classList.remove("active");
arr.forEach(item => {
if (item.dataset.index === btnIndex) {
item.classList.add("active");
}
});
});
}
// 为每一个小按钮添加事件
btns.forEach(btn => btn.addEventListener("click", ev => setActiveEle(ev.target.dataset.index)));
// 借鉴来的
skip.addEventListener("click", skipImg, false);
console.log(skip.children[1]);
// 将前后翻页,使用一个回调统一处理
function skipImg(ev) {
// 当前激活的图片,实际上这里用不到它,而应该用它的父级<a>来判断是否存在兄弟节点
let currentImg = getActiveEle(imgs);
// 当前图片组父元素,注意<img>父级是<a>,<a>的父级才是需要的父节点
let parentEle = currentImg.parentElement.parentElement;
// 当前元素的前一个兄弟节点:previousElementSibling;
let prevEle = currentImg.parentElement.previousElementSibling;
// console.log(prevEle);
// 当前元素的下一个兄弟节点:nextElementSibling;
let nextEle = currentImg.parentElement.nextElementSibling;
// console.log(nextEle);
// 第一张图片, firstElementChild第一个子元素
let firstImg = parentEle.firstElementChild.firstElementChild;
// 最后一张图片, firstElementChild, 最后一个子元素
let lastImg = parentEle.lastElementChild.firstElementChild;
// console.log(lastImg);
let activeImg = currentImg;
// console.log(activeImg);
// 向前翻页
if (ev.target.classList.contains("prev")) {
// console.log(ev.target.classList.contains("prev"));
// 如果存在前一张图片,就使用它,否则就使用最后一张图片来更新它,形成循环显示的效果
let activeImg = prevEle !== null ? prevEle.firstElementChild : lastImg;
// 使用激活元素来同步更新图片与按钮
// console.log(activeImg.dataset.index);
setActiveEle(activeImg.dataset.index);
}
// 向后翻页
if (ev.target.classList.contains("next")) {
// 如果不存在下一张图片,就用第一张图片更新它
let activeImg = nextEle !== null ? nextEle.firstElementChild : firstImg;
setActiveEle(activeImg.dataset.index);
}
}
// 让图片每隔2秒进行自动播放（使用定时器，事件自动派发）
// 单独写一个事件监听器,为后面的事件自动派发做准备
skip.children[1].addEventListener("load", skipImg, false);
let timer = null;
const slider = document.querySelector(".container");
slider.addEventListener("mouseout", startTimer, false);
window.addEventListener("load", startTimer);
slider.addEventListener("mouseover", clearTimer, false);
// 启动定时器
function startTimer() {
// 创建自定义事件对象
const clickEvent = new Event("load");
timer = setInterval(() => skip.children[1].dispatchEvent(clickEvent), 2000);
}
// 清除定时器
function clearTimer() {
clearInterval(timer);
}
</script>
</body>
</html>

懒加载

<script>
// querySelectorAll自带forEach借口，可以直接便利
const imgs = document.querySelectorAll(".container img");
// clientHeight：视口高度 scrollTop：滚动高度
const clientHeight = document.documentElement.clientHeight;
// 实现懒加载
window.addEventListener("scroll", layzyload);
// load:页面加载完成自动执行
window.addEventListener("load", layzyload);
function layzyload() {
// 得到滚动高度
let scrollTop = document.documentElement.scrollTop;
// 遍历图片并判断是否进入到了可视区
imgs.forEach(img => {
// 只要当前图片距离文档顶部的偏移量,小于可视区高度与滚动高度之间则表示进入到可视区,应该显示出来
// clientHeight是可视区高度,这是一个固定的值,滚动高度是动态的
if (img.offsetTop < clientHeight + scrollTop) {
setTimeout(() => (img.src = img.dataset.src), 500);
}
});
}
</script>

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：懒加载是一个实用且常用的功能 , 目前已经有实现它的js对象了, 不必再这么麻烦, 有空可关注一下