运行截图：
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.container>img{
position: absolute;
width: 100%;
height: 1000px;
display: none;
}
.container{
position: relative;
}
#right{
position: absolute;
background: url("D:/Download/1.jpg") no-repeat -41px 50%;
right: 0px;
top: 400px;
width: 41px;
height: 69px;
}
#left{
position:absolute;
background: url("D:/Download/1.jpg") no-repeat 0px 50%;
left: 0px;
top: 400px;
width: 41px;
height: 69px;
}
</style>
<script type="text/javascript">
window.onload = () => {
let img_arr = document.querySelectorAll(".container>img")
// console.log(img_arr)
let right = document.getElementById("right")
// console.log(right)
let left = document.getElementById("left")
// console.log(left)
let index = 0;
right.onclick = function (e) {
console.log(img_arr[index])
img_arr[index].style.display = "none";
index = ++index % img_arr.length
img_arr[index].style.display = "block"
}
left.onclick = function (e) {
console.log(img_arr[index])
img_arr[index].style.display = "none"
if (index==0){
index=img_arr.length - 1
}else{
index--
}
img_arr[index].style.display = "block"
}
}
</script>
</head>
<body>
<div class="container">
<img src="D:/Download/1.jpg" style="display: block;" />
<img src="D:/Download/1.jpg" alt="" />
<img src="D:/Download/1.jpg"/>
</div>
<div id="right">
</div>
<div id="left">
</div>
</body>
</html>