<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.banner{width:1000px;height:300px;margin: 20px auto;position: relative;}
.imgbox{position: absolute;left:0;
height: 300px;}
.imgbox img{width: 1000px;height:300px;position: absolute;left:1000px;top:0;}
.imgbox img:nth-child(1){left:0;top:0;}
.btns input{position: absolute;top:130px;width:40px;height:40px;border: none;background: rgba(200,200,200,0.5);}
#left{left:0}
#right{right:0}
</style>
<script src="../move.js"></script>
</head>
<body>
<div class="banner">
<div class="imgbox">
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
<img src="img/5.jpg" alt="">
<!-- W1.复制第一张图片在最后，做过渡用 -->
</div>
<div class="btns">
<input type="button" id="left" value="<<<">
<input type="button" id="right" value=">>>">
</div>
</div>
</body>
<script>
function Banner() {
this.imgs=document.querySelectorAll(".imgbox img")
this.left=document.querySelector("#left")
this.right=document.querySelector("#right")
this.index=0;//自定义默认显示的图片索引
this.iPrev = this.img.length - 1;
this.init()
}
new Banner()
</script>
</html>