功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.dad{
width: 462px;
height: 320px;
overflow: hidden;
border: 10px dashed red;
margin: 0 auto;
position: relative;
}
.dad img{
width: 462px;
height: 270px;
display: none;
position:absolute ;
left: 0;
top: 0;
}
.dad img.on{
display: block;
}
.dad .turn{
position: absolute;
bottom: 2px;
width: 150px;
height: 30px;
background-color: green;
left: 156px;
}
.turn div{
width: 30px;
height: 30px;
border-radius: 50%;
float: left;
background-color: yellow;
}
.dad .turn .hh{
background-color: red;
}
.l,.r{
width: 30px;
height: 50px;
position: absolute;
top: 110px;
background-color: rgb(157, 252, 4);
z-index: 100;
}
.r{
position: absolute;
right: 0;
}
.l:active,.r:active{
background-color: rgb(245, 4, 212);
}
</style>
</head>
<body>
<div class="dad">
<div class="l"></div><!--左边按钮-->
<!--图片-->
<img src="../img/喵1.jpg" class="on">
<img src="../img/喵2.jpg">
<img src="../img/喵3.jpg">
<img src="../img/喵4.jpg">
<img src="../img/喵5.jpg">
<!--小圆点-->
<div class="turn">
<div class="hh"></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="r"></div><!--右边按钮-->
</div>
<script>
let img=document.querySelectorAll(".dad img")//图片
let btn=document.querySelectorAll(".dad .turn div") //圆点
let index=0 //全局变量
let ll=document.querySelector(".dad .l")//左边的按钮
let rr=document.querySelector(".dad .r")//右边的按钮
//通过清除与增加类名来展示
function show(){
document.querySelector(".dad .turn .hh").classList.remove("hh")
btn[index].classList.add("hh")
document.querySelector(".dad .on").classList.remove("on")
img[index].classList.add("on")
}
//左边按钮
ll.addEventListener("click",()=>{
index--
if(index<0){
index=img.length-1
}
show()
})
//右边按钮
rr.addEventListener("click",()=>{
auto()
})
//小圆点点击事件
for (let j = 0; j < btn.length; j++) {
btn[j].addEventListener("click", ()=>{
index=j
show()
})
}
//自动播放步骤1
function auto(){
index++
if(index>btn.length-1){
index=0
}
show()
}
//自动播放步骤2
setInterval(auto,3500)
</script>
</body>
</html>
