本文实例为大家分享了纯js实现图片自动切换的具体代码，供大家参考，具体内容如下
1.鼠标经过的时候左右两个小按钮会自动弹出，自动播放停止，点击左右小按钮可以切换图片；
2. 鼠标离开，恢复自动播放；
3. 点击下方中间几个小圆圈，也会自动切换图片；
源代码：
|
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
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
|
<!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;
}
/* 轮播图盒子样式 */
.lunbotu {
position: relative;
width: 520px;
height: 280px;
margin: 50px auto;
background-color: blue;
overflow: hidden;
}
/* 左右按钮样式 */
.left,
.right {
display: none;
position: absolute;
top: 50%;
margin-top: -15px;
width: 30px;
height: 30px;
background-color: cornsilk;
border-radius: 15px;
text-align: center;
line-height: 30px;
cursor: pointer;
z-index: 1;
}
.left {
left: 0;
}
.right {
right: 0;
}
li {
list-style: none;
}
/* 设置图片的ul的样式 */
.firstul {
position: absolute;
top: 0;
left: 0;
width: 500%;
}
.firstul li {
float: left;
/* display: none; */
}
/* 设置小圆圈的样式 */
ol {
/* width: 90px; */
padding: 0 5px 0 5px;
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -45px;
background-color: darkgrey;
text-align: center;
border-radius: 9px;
}
ol li {
display: inline-block;
width: 15px;
height: 15px;
border-radius: 50%;
margin-right: 5px;
background-color: white;
cursor: pointer;
}
.current {
background-color: red;
}
</style>
<script src="animation.js"></script>
</head>
<body>
<!-- 图片大小全部是520*280 -->
<div class="lunbotu">
<!-- 左右按钮 -->
<div class="left">></div>
<div class="right"><</div>
<!-- 图片部分 -->
<ul class="firstul">
<li><a href=""><img src=" images/1.jpg" alt=""> </a></li>
<li><a href=""><img src=" images/2.jpg" alt=""> </a></li>
<li><a href=""><img src=" images/3.gif" alt=""> </a></li>
<li><a href=""><img src=" images/4.webp" alt=""> </a></li>
</ul>
<!-- 小圆圈 -->
<ol class="firstol"></ol>
</div>
<!-- JS部分 -->
<script>
// 1.获取事件源
var lunbotu = document.querySelector('.lunbotu');
var leftBox = document.querySelector('.left');
var rightBox = document.querySelector('.right');
var ul = lunbotu.querySelector('ul');
var ol = lunbotu.querySelector('ol');
var right = document.querySelector('.right');
var left = document.querySelector('.left');
var lunbotuWidth = lunbotu.offsetWidth;
// console.log(ul)
// console.log(ol)
// 第一步：
// 鼠标经过轮播图的时候，左右小按钮弹出
lunbotu.addEventListener('mouseenter', function () {
leftBox.style.display = 'block';
rightBox.style.display = 'block';
// 鼠标经过轮播图的时候，停止定时器
clearInterval(timer);
})
// 鼠标离开轮播图的时候，左右小按钮隐藏
lunbotu.addEventListener('mouseleave', function () {
leftBox.style.display = 'none';
rightBox.style.display = 'none';
timer = setInterval(function () {
right.click();
}, 2000)
})
// 第二步：
// 1.动态生成小圆圈
// 2.小圆圈的个数要跟图片一样
// 3.先得到ul里面图片的张数(图片放入li里面，所以就是li的个数)
// 4.利用循环动态生成小圆圈(这个小圆圈要放入ol里面)
// 5.创建节点createElement('li')]
// 6.插入节点ol.appendChild(li)
// 7.第一个小圆圈需要添加current类
for (var i = 0; i < ul.children.length; i++) {
// 创建一个li
var li = document.createElement('li')
// 记录当前小圆圈的索引号 通过自定义属性来做
li.setAttribute('index', i);
// 把li添加到ol
ol.appendChild(li);
}
// 排他思想：让小Li变白色
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].addEventListener('click', function () {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
} this.className = 'current';
// 点击小圆圈的时候切换到对应的图片
// 得到索引号 index
var index = this.getAttribute('index');
// 解决小bug
num = index;
num_ol = index;
// console.log(lunbotuWidth);
// console.log(index)
animation(ul, - index * lunbotuWidth)
})
}
// 给第一个li变颜色
ol.children[0].className = 'current';
// 克隆第一个li
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
// 第三步:
// 点击右边按钮事件
var num = 0;
// 点击右侧按钮的时候小圆圈跟着滚动
var num_ol = 0;
// 节流阀，防止点击过快，最后才加这句优化
var flag = true;
// 右侧按钮：
right.addEventListener('click', function () {
if (flag) {
flag = false; // 关闭节流阀
if (num == ul.children.length - 1) {
ul.style.left = 0;
num = 0;
}
num++;
animation(ul, -num * lunbotuWidth, function () {
flag = true;
});
num_ol++;
if (num_ol == ol.children.length) {
num_ol = 0
}
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[num_ol].className = 'current';
}
});
// 左侧按钮：
left.addEventListener('click', function () {
if (flag) {
flag = false;
if (num == 0) {
ul.style.left = -(ul.children.length - 1) * lunbotuWidth + 'px';
num = ul.children.length - 1;
}
num--;
animation(ul, -num * lunbotuWidth, function () {
flag = true;
});
num_ol--;
// num_ol=0的时候需要，点击左侧按钮，需要转跳到ol.children.length-1的位置
if (num_ol < 0) {
num_ol = ol.children.length - 1
}
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[num_ol].className = 'current';
}
});
// 自动播放图片
var timer = setInterval(function () {
right.click();
}, 2000)
</script>
</body>
</html>
|
5.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
|
// 封装了一个动画js文件
function animation(obj,target,fn1){
// console.log(fn1);
// fn是一个回调函数，在定时器结束的时候添加
// 每次开定时器之前先清除掉定时器
clearInterval( obj.timer);
obj.timer = setInterval(function(){
// 步长计算公式 越来越小
// 步长取整
var step = (target - obj.offsetLeft) /10;
step = step > 0 ? Math.ceil(step) :Math.floor(step);
if(obj.offsetLeft == target){
clearInterval( obj.timer);
// 如果fn1存在，调用fn
if(fn1){
fn1();
}
}else{
// 每50毫秒就将新的值给obj.left
obj.style.left = obj.offsetLeft +step +'px';
}
},30)
}
|
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/mxjwxhn/article/details/107870552