1.描述：很简单，就是改变img的src
2.需要注意的就是到低和顶点击发按钮需要显示的图
3.效果
4.比较简介用的技术也单一后期在摸索摸索
5.代码
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<div class="page">
<div class="lun">
<div class="btn">
<a class="zuo">
< </a>
<a class="you">></a>
</div>
<div class="lili">
</div>
</div>
</div>
<script>
let left = document.querySelector(".zuo")
let right = document.querySelector(".you")
let luns = document.querySelector(".lun")
let lis = document.querySelector(".lili")
let lunarr = ["../pho/1.jfif", "../pho/2.jfif", "../pho/3.jfif", "../pho/4.jfif"]
let images = document.createElement("img")
let page = 0
images.src = lunarr[page]
luns.appendChild(images)
for (let s = 0; s < lunarr.length; s++) {
let onli = document.createElement("a")
onli.className = s
lis.appendChild(onli)
}
let liactive = (pa) => {
let allli = document.querySelectorAll(".lili a")
for (let i = 0; i < allli.length; i++) {
allli[i].classList.remove("active")
}
allli[pa].classList.add("active")
}
let onright = () => {
if (page < lunarr.length - 1) {
page += 1
} else {
page = 0
}
pages(page)
liactive(page)
}
let pages = (page) => {
images.src = lunarr[page]
console.log(page)
}
let onleft = () => {
if (page <= 0) {
page = lunarr.length - 1
} else {
page -= 1
}
pages(page)
liactive(page)
}
right.addEventListener("click", onright);
left.addEventListener("click", onleft);
liactive(0)
</script>
<style>
.lun {
width: 100%;
position: relative;
}
.lun img {
width: 100%;
height: 40vh;
}
.btn {
font-size: 3vw;
color: rgb(253, 253, 253);
}
.btn a {
background-color: rgb(202, 202, 202);
opacity: 0.8;
}
.zuo {
position: absolute;
left: 0;
top: 50%;
}
.you {
position: absolute;
right: 0;
top: 50%;
}
.lili a {
display: inline-block;
width: 0.8vw;
height: 1.5vh;
border-radius: 100%;
background-color: rgb(255, 255, 255);
margin-left: 0.2vw;
}
.lili {
position: absolute;
bottom: 2vh;
left: 45%;
}
.active {
background-color: rgb(189, 183, 183) !important;
}
</style>
</body>
</html>
