DOCTYPE html
>
lang=
"en"
>
charset=
"UTF-8"
>
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
Document
* {
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>
id=
"wrap"
>
class=
"block"
>
src=
"./img/1.jpg"
alt=
""
>
src=
"./img/2.jpg"
alt=
""
>
src=
"./img/3.jpg"
alt=
""
>
src=
"./img/4.jpg"
alt=
""
>
class=
"active"
>
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>