随笔：打算年后呢换份工作，最近也在js整理面试题,以及复习一下js中的基础知识，那么js中经典的两大案例，我打算这两天整理整理，依次来复习一下知识点
先上代码
<!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>Document</title>
<style>
#oImg {
width: 500px;
height: 300px;
background-size: 500px 300px;
position: relative;
margin: 100px auto;
transition: 1s all linear;
}
#btn-previous {
width: 30px;
position: absolute;
left: 25px;
top: 150px;
}
#btn-next {
width: 30px;
position: absolute;
left: 450px;
top: 150px;
}
li {
list-style: none;
width: 10px;
height: 10px;
background: black;
border-radius: 50%;
margin: 10px;
float: left;
}
ul {
position: absolute;
left: 120px;
top: 250px;
}
</style>
</head>
<body>
<div id="oImg">
<input id="btn-previous" type="button" value="" />
<input id="btn-next" type="button" value=">" />
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
<script>
let oBox = document.querySelector("#oImg");
let oBtnLeft = document.querySelector("#btn-previous");
let oBtnRight = document.querySelector("#btn-next")
let oLis = document.querySelectorAll("li");
// 核心是改变index的值
// 1、该类是否需要外界的dom元素，如果需要则将这些dom元素当作参数传递
// 2、实现其他功能的参数的变量
class Banner {
constructor(box, btnLeft, btnRight, lis) {
this.time = null;
this.index = 0;
this.oBox = box;
this.oBtnLeft = btnLeft;
this.oBtnRight = btnRight;
this.oLis = lis;
this.oBox.style.backgroundImage = `url(../img/${this.index}.jpg)`;
this.oLis[this.index].style.backgroundColor = `green`;
}
// 设置box背景
setBoxBg() {
this.oBox.style.backgroundImage = `url(../img/${this.index}.jpg)`;
}
// 设置li的颜色
setLiColor() {
for (let i = 0; i < oLis.length; i++) {
if (this.index === i) {
this.oLis[i].style.backgroundColor = `green`;
} else {
this.oLis[i].style.backgroundColor = `red`;
}
}
}
// ---------------
// 以下为单个方法，将共有方法写上面
// 设置右边按钮
setRight() {
this.index++;
if (this.index == this.oLis.length) {
this.index = 0;
}
this.setBoxBg();
this.setLiColor();
}
// 设置左边按钮
setLeft() {
this.index--;
// console.log(21)
// 当图片是倒数点图片时候，这时候数组的长度是length-1
if (this.index == -1) {
this.index = this.oLis.length - 1;
}
this.setBoxBg();
this.setLiColor();
}
// 点击按钮
clickLi() {
let that = this;
for (let i = 0; i < oLis.length; i++) {
this.oLis[i].onclick = function() {
// 在点击事件中this代表被点击的事件，此时也要存住之前this
that.index = i;
that.setBoxBg();
that.setLiColor();
}
}
}
//绑定事件
eventBind() {
let that = this;
this.oBtnRight.onclick = function() {
that.setRight();
}
this.oBtnLeft.onclick = function() {
that.setLeft();
}
// 点击左右按钮的同时让小圆点同时改变
that.clickLi();
that.autoplay();
that.stopPlay();
that.setLiColor();
}
// 设置自动播放
autoplay() {
let that = this;
that.time = setInterval(function() {
that.setRight();
}, 2000)
}
stopPlay() {
let that = this;
console.log(that.time)
that.oBox.onmouseover = function() {
clearInterval(that.time)
}
that.oBox.onmouseout = function() {
that.autoplay()
}
}
}
let b = new Banner(oBox, oBtnLeft, oBtnRight, oLis);
b.eventBind();
</script>
浙公网安备 33010602011771号