<!DOCTYPE html>
<html lang="zh-CN">
<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>
/* ! 3. 轮播图 */
.slider {
max-width: 750px;
min-width: 320px;
margin: auto;
padding: 0 10px;
}
.slider .imgs {
/* 图片容器必须要有高度,否则下面图片不能正常显示 */
height: 150px;
}
.slider .imgs img {
/* 图片完全充满父级空间显示 */
height: 100%;
width: 100%;
/* 图片带有圆角 */
border-radius: 10px;
/* 默认图片全部隐藏,只有有active的图片才显示 */
display: none;
}
.slider .imgs img:hover {
cursor: pointer;
}
/* 默认显示第一张 */
.slider .imgs img.active {
display: block;
}
/* 轮播图按钮组 */
.slider .btns {
/* 按钮水平一排显示,用flex,且水平居中 */
display: flex;
place-content: center;
}
.slider .btns span {
/* 按钮宽高相同,确定显示成一个正圆 */
width: 8px;
height: 8px;
/* 加上红色背景和数字是为了布局时可以看到,一会更去掉 */
background-color: rgba(255, 255, 255, 0.4);
/* 50%可确保显示为正圆 */
border-radius: 50%;
/* 按钮上外边距负值,可将它上移,可移动到图片中下方 */
margin: -12px 3px 5px;
}
.slider .btns span.active {
background-color: #fff;
}
</style>
</head>
<body>
<div class="slider">
<!--
图片容器
1. 图片组
2. 按钮组
注: 按钮数组与图片数量是一样的
-->
<div class="imgs">
<!-- 轮播图默认从第一张开始显示 -->
<img src="./images/banner1.jpg" alt="" data-index="1" class="active" />
<img src="./images/banner2.jpg" alt="" data-index="2" />
<img src="./images/banner3.png" alt="" data-index="3" />
</div>
<!-- 切换按钮数量与图片数量必须一致 -->
<div class="btns">
<span data-index="1" class="active" onclick="setActive()"></span>
<span data-index="2" onclick="setActive()"></span>
<span data-index="3" onclick="setActive()"></span>
</div>
</div>
<script>
// 1. 获取全部图片和按钮
const imgs = document.querySelectorAll('.slider .imgs img')
const btns = document.querySelectorAll('.slider .btns span')
// 2. 设置激活状态
function setActive() {
// 1. 清空图片和所有按钮的激活状态
imgs.forEach(img => img.classList.remove('active'));
//等效
//forEach() 方法对数组的每个元素执行一次提供的函数。
// imgs.forEach(
// function(img){//img为传值参数
// console.log(img)//输出元素<img src="./images/banner2.jpg" alt="" data-index="2">
// img.classList.remove('active')
// }
// );
btns.forEach(btn => btn.classList.remove('active'));
// 2. 根据按钮的索引data-index来确定应该将哪一张图片显示出来class=active
event.target.classList.add('active')
imgs.forEach(img => {
if (img.dataset.index === event.target.dataset.index) {
img.classList.add('active')
}
})
}
// 3. 自动播放
// [1,2,3]
// [2,3,1]
// [3,1,2]
// [1,2,3]
// 首尾相连,实现循环播放
// 自动点击: 事件派发器
// 间歇式触发,每隔一段固定时间会自动触发一次事件
// setInterval: 除了回调和时间外,还可传入第三个参数,做为回调的参数
setInterval((arr) => {
// 1. 头部删除
let i = arr.shift()
// 2. 尾部追加
arr.push(i);
// 3. 事件派发: 模拟用户点击
btns[i].dispatchEvent(new Event('click'))
}, 2000, Object.keys(btns));
//Object.keys(btns) 是将对象转换为键值，赋予arr参数给函数里 头删尾追 时使用。
//console.log(Object.keys(btns));
// console.log(Object.keys(imgs));
// 作业1: 实现鼠标悬停时自动停止播放, 离开时又自动播放
// 作业2[可选]: 给这个轮播图加上翻页按按钮,实现向前和向后翻页播放
</script>
</body>
</html>
