js面向对象实现轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
.box {
width: 450px;
height: 300px;
background-color: blue;
margin: 20px auto;
position: relative;
/* background: url(./img/0.jpg); */
}
/* 按钮 */
input {
width: 40px;
height: 30px;
position: absolute;
top: 130px;
z-index: 1;
font-size: 20px;
font-weight: bolder;
}
#previous {
left: 30px;
}
#next {
left: 380px;
}
/* 小圆点 */
ul {
position: absolute;
top: 260px;
left: 150px;
}
ul>li {
width: 10px;
height: 10px;
margin: 0 10px;
border-radius: 50%;
float: left;
}
/* 图片 */
/* .imgbox img {
width: 450px;
height: 300px;
position: absolute;
} */
</style>
</head>
<body>
<div class="box">
<input type="button" id="previous" value="<">
<input type="button" id="next" value=">">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
<script>
class Banner {
constructor(newimg, newli) {
this.index = 0;//先保存索引，这一步至关重要
this.img = newimg;
this.li = newli;
// this.img.style.backgroundImage = "url(./img/" + this.index + ".jpg)";
// this.li[this.index].style.backgroundColor = "red";
}
//设置背景图片
setImgbackground() {
this.img.style.backgroundImage = "url(./img/" + this.index + ".jpg)";
}
//设置li的背景
setLibackground() {
let that = this;
for (let i = 0; i < this.li.length; i++) {
if (i == this.index) {
this.li[i].style.backgroundColor = "red";
} else {
this.li[i].style.backgroundColor = "black";
}
}
this.setImgbackground();
}
//prev事件
prev() {
this.index--;
if (this.index == -1) {
this.index = this.li.length - 1;
}
this.setImgbackground();
this.setLibackground();
}
//next事件
next() {
this.index++;
if (this.index == this.li.length) {
this.index = 0;
}
this.setImgbackground();
this.setLibackground();
}
//点击按钮
eventbindbtn() {
let oprev = document.querySelector("#previous");
let onext = document.querySelector("#next");
let that = this;
oprev.onclick = function () {
that.prev();
}
onext.onclick = function () {
that.next();
}
}
//点击圆点
eventbindli() {
let that = this;
for (let i = 0; i < this.li.length; i++) {
this.li[i].onclick = function () {
that.index = i;
that.setImgbackground();
that.setLibackground();
}
}
}
}
let obox = document.querySelector(".box");
let oli = document.querySelectorAll("li");
var b = new Banner(obox, oli);
b.setLibackground();
b.setImgbackground();
b.eventbindbtn();
b.eventbindli();
</script>
