轮播图的实现在js中算是一个有点复杂的问题
很多人在学完js之后还是一头雾水 不知道怎么实现轮播图
其实轮播图就是使用for循环 计时器等来改变容器的classname或者ID
使特定ID或者classname呈现出来
这里我将使用HTML代码与js代码来实现一个简单的轮播图
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态轮播</title>
<style>
#wrapper {
width: 550px;
height: 300px;
position: relative;
margin: 300px auto;
cursor:pointer;
}
#wrapper:hover .btn{
opacity: 1;
transition: all 0.6s;
}
img {
position: absolute;
width: 550px;
height: 300px;
opacity:0;
transition: all 0.8s;
}
.btn {
position: absolute;
top: 135px;
background: none;
border: none;
opacity: 0;
}
.btn img{
width: 50px;
height: 50px;
opacity:0.7;
z-index: 100;
}
#btnLeft {
left: 10px;
}
#btnRight {
right:60px;
}
.pic.active{
z-index: 100;
opacity: 1;
}
.point {
list-style: none;
position: absolute;
right: 20px;
bottom: 15px;
z-index: 300;
margin-bottom: 0;
}
.pot {
margin-left: 12px;
width: 8px;
height: 8px;
border: 2px solid rgba(255,255,255,0.8);
float: left;
border-radius: 100%;
background-color: rgba(0,0,0,0.4);
}
.pot.active {
background-color: rgba(243,149,176,1);
}
</style>
</head>
<body>
<div id="wrapper">
<img src="img/1.jpg" alt="" class="pic active">
<img src="img/2.jpg" alt="" class="pic">
<img src="img/3.jpg" alt="" class="pic">
<img src="img/4.jpg" alt="" class="pic">
<ul class="point">
<li class="pot active" arr="0"></li>
<li class="pot" arr="1"></li>
<li class="pot" arr="2"></li>
<li class="pot" arr="3"></li>
</ul>
<buttom class="btn" id="btnLeft"><img src="img/a1.png" alt=""></buttom>
<buttom class="btn" id="btnRight"><img src="img/a2.png" alt=""></buttom>
</div>
<script>
let pics = document.getElementsByClassName('pic');
let btnL = document.getElementById('btnLeft');
let btnR = document.getElementById('btnRight');
let points = document.getElementsByClassName('pot');
let swiper = document.getElementById('wrapper');
//index表示第几张图片在展示
let index = 0;
//存储时间
let time = null;
let clearPics = ()=> {
//全部去掉active类名
for (let i =0; i<pics.length; i++){
pics[i].className = "pic"
}
for (let i =0; i<points.length; i++){
points[i].className = "pot"
}
};
let update = ()=> {
clearPics();
//，第index张图片有active类名
pics[index].className = "pic active";
points[index].className = "pot active";
};
//声明一个变量，每当执行一次btnNext函数变切换下一张图片并且添加active类名，当图片是最后一张时，下次切换回到初始图片
let btnNext = ()=> {
index ++;
if(index === 4){
index = 0;
}
//执行update()方法给图片添加active类名
update();
};
//声明一个变量，每当执行一次btnText函数变切换上一张图片并且添加active类名，当图片是最后一张时，下次切换回到初始图片
let btnText = ()=> {
if (index === 0){
index = 3
}else {
index --;
}
//执行update()方法给图片添加active类名
update();
};
//默认开启定时器每一秒钟切换下一张图片
time=setInterval( ()=> {
btnNext();
},1000);
//鼠标移入图片关闭定时器
swiper.onmouseover = ()=> {
clearInterval(time);
};
//鼠标移出图片开启定时器，继续执行默认操作
swiper.onmouseout = ()=> {
time=setInterval( ()=> {
btnNext();
},1000);
};
//给右键按钮添加点击事件，每点击调用一次btnNext()函数
btnR.addEventListener('click', ()=> {
btnNext();
});
//给左键按钮添加点击事件，每点击调用一次btnText()函数
btnL.addEventListener('click',()=> {
btnText();
});
//先遍历所有的点给一个点添加点击事件
for (let i=0; i<points.length; i++){
points[i].addEventListener('click', function() {
//声明一个变量用来存储当前的点是哪一位(在html里面给标签存入了数据)
let opt = this.getAttribute('arr');
//让把当前点击的点值跟index相等，这样就是保证当点击点的时候跳转到对应的图片
index = opt;
update();
})
}
</script>
</body>
</html>
|
以上为html与js的代码 由于轮播图设计的比较简单
css就直接写在了head中
本次变量推荐使用ES6语法 使用起来会非常方便
