<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Leon</title>
<style>
*{margin: 0;padding: 0;}
a{text-decoration: none;}
.banner{
width: 500px;
height: 300px;
border: 5px solid #ccc;
margin: 100px auto;
position: relative;
}
ul,li{list-style: none;}
ul img{
width: 500px;
height: 300px;
}
ul>li{
width: 500px;
height: 300px;
display: none;
}
ul>li.current{
display: block;
}
.banner>a{
width: 20px;
height: 40px;
background-color: #666;
opacity: 0.5;
color: #fff;
line-height: 40px;
text-align: center;
display: block;
position: absolute;
top: 50%;
transform: translateY(-20px);
}
.left{
left: 0;
}
.right{
right: 0;
}
ol{
width: 100px;
height: 20px;
background-color: #fff;
opacity: 0.7;
border-radius: 10px;
position: absolute;
left: 50%;
transform: translateX(-50px);
bottom: 10px;
display: flex;
justify-content: space-evenly;
align-items: center;
}
ol>li{
width: 10px;
height: 10px;
background-color: red;
border-radius: 50%;
cursor: pointer;
}
ol>li.active{
background-color: cyan;
}
</style>
</head>
<body>
<div class="banner">
<ul>
<li class="current"><a href="javascript:;"><img src="./images/1.jpg"></a></li>
<li><a href="javascript:;"><img src="./images/2.jpg"></a></li>
<li><a href="javascript:;"><img src="./images/3.jpg"></a></li>
</ul>
<ol>
<li class="active"></li>
<li></li>
<li></li>
</ol>
<a href="javascript:;" class="left"><</a>
<a href="javascript:;" class="right">></a>
</div>
</body>
</html>
<script>
// 1. 获取到要操作的元素
let banner = document.querySelector('.banner');
let ul = document.querySelector('ul');
let ulis = document.querySelectorAll('ul>li');
let olis = document.querySelectorAll('ol>li');
let prve = document.querySelector('.left');
let next = document.querySelector('.right');
// 2. 通过定时器，让图片自动的轮播播放
let timer; //定时器的标识
let n = 0;// 变量n播放显示的图片的li的索引 ，0 表示第一张图片的li的索引
timer = setInterval(function(){
/*
自动播放思路：
通过定时器的每过一段时间执行函数代码，每过1秒让 变量n++，让显得li索引加1，
当n = 3的时候，表示前一个显示的是最一张图片，此时需要显示的第一张，所以需要将 n = 0
通过改变后的变量n的索引，来显示索引对应的图片li
先将所有的ulis中的li元素的current样式，清 空，然后根据n的索引找到对应要显示的图片li，添加current样式
通过改变后的变量n的索引，显示小圆点高亮
先将所有的小圆点的li active样式清除，根据n的索引找到对应要高亮显示的小圆点li，添加active样式
*/
// ①. 变量n索引值自增
n++;
// 调用play，图片播放函数
play();
},1000)
// 3. 鼠标移入移出实现，图片播放的停止和继续
// ①. 鼠标移入，播放停止（鼠标移入清除定时器）
banner.onmouseenter = ()=>clearInterval(timer);
// ②. 鼠标移出，播放继续
banner.onmouseleave = ()=>{
// 通过定时器，自动播放启动
timer = setInterval(()=>{
// ①. 变量n索引值自增
n++;
// 调用play显示函数
play();
},1000);
}
// 4. 实现点击上一张下一张图片
//①. 显示点击显示上一张图片
prve.onclick = ()=>{
n--;
// 如果 n < 0 的时候，表示上一次显示的第一张图片，这次要显示的第三张
if(n<0){
n = 2;
}
// 调用图片显示函数
play();
}
// ②. 显示点击下一张图片
next.onclick = ()=>{
n++;
// 调用图片显示函数
play();
}
// 5. 点击小圆点实现图片切换播放
// ①. 比遍历olis，给ol中的每一个li一个点击事件
for(let i = 0; i<olis.length; i++){
// 循环的时候，使用的let声明的i，所有在点击事件中，可以拿到每一个i的值
olis[i].onclick = ()=>{
// console.log(i);
// 将点击事件中i的值给到n，让点击的这个小球的索引对应的图片显示播放
n = i;
// 调用播放显示函数
play();
}
}
// 图片播放函数
function play(){
// ②. 当n = 3时，需要将n赋值0
if(n==3){
n = 0;
}
// ③. 遍历ulis，将所有的li的current样式清空
for(let i = 0; i<ulis.length; i++){
ulis[i].className = '';
}
// ④. 给变量n对应的ulis中的li添加current样式
ulis[n].className = 'current';
// ⑤.遍历olis,将ol中所有的li清除 active样式
for (let j = 0; j < olis.length; j++) {
olis[j].className = '';
}
// ⑥.给n对应的小圆点添加active样式
olis[n].className = 'active'
}
</script>
