<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a,
img {
text-decoration: none;
display: block;
width: 100%;
height: 100%;
}
#wrap {
width: 500px;
height: 300px;
position: relative;
margin: 20px auto;
border: 1px solid #ddd;
}
#list {
width: 500px;
height: 300px;
position: relative;
}
#list li {
position: absolute;
left: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in;
}
#list li.block {
opacity: 1;
}
#option {
width: 100px;
height: 20px;
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -50px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
#option li {
float: left;
width: 20px;
height: 20px;
border-radius: 50%;
background: pink;
border: 1px solid #fff;
}
#option li.active {
background: skyblue;
}
#btn a {
width: 40px;
height: 60px;
background: rgba(0, 0, 0, .3);
color: #fff;
line-height: 60px;
text-align: center;
position: absolute;
top: 50%;
margin-top: -30px;
}
#btn a.prev {
left: 0;
}
#btn a.next {
right: 0;
}
</style>
</head>
<body>
<div id="wrap">
<ul id="list">
<li class="block">
<a href="###">
<img src="./img/1.jpg" alt="">
</a>
</li>
<li>
<a href="###">
<img src="./img/2.jpg" alt="">
</a>
</li>
<li>
<a href="###">
<img src="./img/3.jpg" alt="">
</a>
</li>
<li>
<a href="###">
<img src="./img/4.jpg" alt="">
</a>
</li>
</ul>
<ul id="option">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
<div id="btn">
<a href="###" class="prev"><</a>
<a href="###" class="next">></a>
</div>
</div>
<script>
class Fade {
constructor(oListLi, oPtionLi, oBtn) {
this.oListLi = oListLi;
this.oPtionLi = oPtionLi;
this.oBtn = oBtn;
this.len = oPtionLi.length;
this.index = 0;
}
init() {
this.optionSwitch();
this.btnSwitch();
}
optionSwitch() {
for (let i = 0; i < this.len; i++) {
this.oPtionLi[i].addEventListener("mouseover", () => {
this.oPtionLi[this.index].className = "";
this.oPtionLi[i].className = "active";
this.oListLi[this.index].className = "";
this.oListLi[i].className = "block";
this.index = i;
})
}
}
btnSwitch() {
for (let i = 0; i < 2; i++) {
this.oBtn[i].addEventListener("click", () => {
this.oPtionLi[this.index].className = "";
this.oListLi[this.index].className = "";
if (i) {
this.index++;
if (this.index == this.len) {
this.index = 0
}
} else {
this.index--;
if (this.index == -1) {
this.index = this.len - 1
}
console.log(this.index)
}
this.oPtionLi[this.index].className = "active";
this.oListLi[this.index].className = "block";
})
}
}
}
class FadeChildren extends Fade {
constructor(oListLi, oPtionLi, oBtn, wrap) {
super(oListLi, oPtionLi, oBtn);
this.wrap = wrap;
this.timer = null;
}
init() {
this.play();
this.pause();
this.optionSwitch();
this.btnSwitch();
}
play() {
clearInterval(this.timer);
this.timer = setInterval(() => {
this.oPtionLi[this.index].className = "";
this.oListLi[this.index].className = "";
this.index++;
if (this.index == this.len) {
this.index = 0
}
this.oPtionLi[this.index].className = "active";
this.oListLi[this.index].className = "block";
}, 2000)
}
pause(){
this.wrap.addEventListener("mouseover",()=>{
clearInterval(this.timer);
});
this.wrap.addEventListener("mouseout",()=>{
this.play()
})
}
}
let oListLi = document.querySelectorAll("#list li");
let oPtionLi = document.querySelectorAll("#option li");
let oBtn = document.querySelectorAll("#btn a");
let wrap = document.querySelector("#wrap")
/* console.log(oListLi,oPtionLi,oBtn) */
/* new Fade(oListLi,oPtionLi,oBtn).init(); */
new FadeChildren(oListLi, oPtionLi, oBtn, wrap).init()
</script>
</body>
</html>