JS经典案例：懒加载和轮播图 - JS学习

案例一：懒加载

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>懒加载</title>
<style>
.images {
width: 1200px;
margin: 10px auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.images > img {
margin: 10px auto;
width: 500px;
height: 400px;
}
</style>
</head>
<body>
<div class="images">
<img src="images/temp.jpg" alt="" data-index="images/img-1.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-2.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-3.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-4.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-5.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-6.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-7.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-8.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-9.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-10.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-11.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-12.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-13.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-14.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-15.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-16.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-17.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-18.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-19.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-20.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-21.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-22.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-23.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-24.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-25.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-26.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-27.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-28.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-29.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-30.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-31.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-32.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-33.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-34.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-35.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-36.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-37.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-38.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-39.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-40.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-41.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-42.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-43.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-44.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-45.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-46.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-47.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-48.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-49.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-50.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-51.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-52.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-53.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-54.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-55.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-56.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-57.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-58.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-59.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-60.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-61.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-62.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-63.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-64.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-65.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-66.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-67.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-68.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-69.jpg" />
<img src="images/temp.jpg" alt="" data-index="images/img-70.jpg" />
</div>
</body>
<script>
var cl = console.log.bind(console);
var imgs = document.querySelectorAll("img");
var viewheight = document.documentElement.clientHeight; //文档可视区域大小
cl(window);
//监听浏览器窗口滚动
window.addEventListener(
"scroll",
function () {
var scroll = document.documentElement.scrollTop; //文档滚动大小
imgs.forEach(function (item) {
if (item.offsetTop <= viewheight + scroll)
item.src = item.dataset.index;
});
},
false
);
</script>
</html>

2.运行结果图：

案例二：轮播图

1.代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>轮播图</title>
<style>
body {
/*background-color: #808080;*/
}
.slider {
width: 800px;
height: 280px;
margin: 10px auto;
position: relative;
}
.slider > .images > .image {
width: 800px;
height: 280px;
display: none;
}
.slider > .images > .active {
display: block;
}
.slider > .skip {
display: inline-block;
width: 40px;
height: 60px;
background-color: RGB(255, 255, 255, 0.2);
text-align: center;
line-height: 60px;
font-size: 30px;
color: RGB(0, 0, 0, 0.2);
position: absolute;
top: 100px;
}
.slider > .skip:hover {
cursor: pointer;
background-color: RGB(255, 255, 255, 0.6);
color: RGB(0, 0, 0, 0.8);
}
.slider > .prev {
position: absolute;
left: 0;
}
.slider > .next {
position: absolute;
right: 0;
}
.slider > .points {
width: 550px;
/* margin: 0 auto; */
text-align: center;
position: absolute;
bottom: 10px;
left: 150px;
}
.slider > .points > .point {
display: inline-block;
width: 12px;
height: 12px;
margin: 0 5px;
background-color: white;
border-radius: 100%;
}
.slider > .points > .point:hover {
cursor: pointer;
}
.slider > .points > .active {
background-color: black;
}
</style>
</head>
<body>
<div class="slider">
<div class="images">
<img
class="image active"
src="banner/banner1.jpg"
alt=""
data-index="1"
/>
<img class="image" src="banner/banner2.jpg" alt="" data-index="2" />
<img class="image" src="banner/banner3.jpg" alt="" data-index="3" />
<img class="image" src="banner/banner4.jpg" alt="" data-index="4" />
</div>
<span class="skip prev"><</span>
<span class="skip next">></span>
<div class="points">
<span class="point active" data-index="1"></span>
<span class="point" data-index="2"></span>
<span class="point" data-index="3"></span>
<span class="point" data-index="4"></span>
</div>
</div>
</body>
<script>
var cl = console.log.bind(console);
var imgs = document.querySelectorAll("img");
var prev = document.querySelector(".prev");
// cl(prev);
var next = document.querySelector(".next");
var pointparent = document.querySelector(".points");
var points = document.querySelectorAll(".point");
//小圆点切换
pointparent.addEventListener(
"click",
function (ev) {
// cl(ev.target.nodeType);
if (ev.target.nodeType === 1 && ev.target != pointparent) {
arr = Array.from(pointparent.children);
arr.forEach(function (item) {
item.classList.remove("active");
});
ev.target.classList.add("active");
imgs.forEach(function (item) {
item.classList.remove("active");
if (item.dataset.index === ev.target.dataset.index) {
item.classList.add("active");
}
});
}
},
false
);
//向前翻页
prev.addEventListener(
"click",
function () {
var active = document.querySelector(".slider>.images>.active");
imgs.forEach(function (item) {
item.classList.remove("active");
});
if (active.previousElementSibling) {
pre = active.previousElementSibling;
} else {
pre = imgs[imgs.length - 1];
}
pre.classList.add("active");
points.forEach(function (item) {
item.classList.remove("active");
if (item.dataset.index === pre.dataset.index) {
item.classList.add("active");
}
});
},
false
);
// 向后翻页
next.addEventListener(
"click",
function () {
var active = document.querySelector(".slider>.images>.active");
imgs.forEach(function (item) {
item.classList.remove("active");
});
if (active.nextElementSibling) {
nex = active.nextElementSibling;
} else {
nex = imgs[0];
}
nex.classList.add("active");
points.forEach(function (item) {
item.classList.remove("active");
// cl(item.dataset.index);
if (item.dataset.index === nex.dataset.index) {
item.classList.add("active");
}
});
},
false
);
// //自动播放
var slider = document.querySelector(".slider");
// cl(slider);
//移出自动播放
slider.addEventListener("mouseout", timer, false);
//定时器
var timer = setInterval(function () {
var click = new Event("click");
next.dispatchEvent(click);
}, 2000);
//移入清除定时器
slider.addEventListener(
"mouseover",
function () {
clearInterval(timer);
},
false
);
</script>
</html>

2.代码运行效果：

总结：

1、经典案例主要操作是DOM操作，创建元素、获取元素、修改元素属性、删除元素
2、parentElement:父级元素；ul.insertBefore(li1,li2);把li1插入ul中li2之前；
3、事件委托时：触发事件，要区分非元素节点和父级元素以及子的元素
4、document.documentElement.clientHeight：获取文档可视区域大小；window.addEventListener();窗口监听函数；document.documentElement.scrollTop; 文档滚动大小；
5、new Event()创建模拟事件；setInterval(callback,time)定时执行函数;

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：这个案例如何全部独立完成, js基础知识就算是掌握了