-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path轮播图.html
247 lines (221 loc) · 6.68 KB
/
轮播图.html
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
245
246
247
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js原生轮播图</title>
</head>
<body>
<div class="box" id="box">
<div class="inner" id="inner">
<ul id="imgList">
<li>
<a href="#"><img src="img/01.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="img/02.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="img/03.jpg"></a>
</li>
<li>
<a href="#"><img src="img/04.jpg"></a>
</li>
<li>
<a href="#"><img src="img/05.jpg"></a>
</li>
<li>
<a href="#"><img src="img/06.jpg"></a>
</li>
</ul>
<div class="list">
<i class="current">1</i>
<i>2</i>
<i>3</i>
<i>4</i>
<i>5</i>
<i>6</i>
</div>
<div class="arrow">
<span class="arrow-left"><</span>
<span class="arrow-right">></span>
</div>
</div>
</div>
</body>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
List-style: none;
}
.box{
width: 730px;
height: 454px;
padding: 8px;
border: 1px solid green;
margin: 100px auto;
}
img{
width: 400px;
height: 300px;
}
.inner{
position: relative;
overflow: hidden;
height: 454px;
}
#imgList{
width: 700%;
position: absolute;
left: 0;
transition: left 300ms linear;
}
li{
float: left;
}
.list{
position: absolute;
bottom: 20px;
left: 50%;
margin-left:-85px;
}
.list i{
width: 20px; /**这是设置123的*/
height: 20px;
border-radius:50%;
background-color: #fff;
color: #333;
float: left;
font-style:normal;
line-height: 20px;
font-size: 14px;
text-align: center;
margin-right:10px;
cursor: pointer;
}
.list i.current{
background-color: skyblue; /*这是设置下面1234角标颜色的*/
color: #fff;
}
.arrow{
position: absolute;
width: 100%;
top: 50%;
margin-top: -30px;
}
.arrow-left,.arrow-right{
width: 30px;
height: 60px;
position: absolute;
font: 20px/60px "consolas";
color: #fff;
background-color: rgba(0, 0, 0, .3);
text-align:center ;
cursor: pointer;
}
.arrow-right{
right: 0;
}
</style>
<script>
//获取DoM
var yuan = document.querySelectorAll("i"); //点击控制图片的切换
var li = document.querySelector("ul li");
var ul = document.querySelector("ul");
var imgs = document.querySelector("#imgList");
var right = document.querySelector(".arrow-right");
var left = document.querySelector(".box");
window.onload = function () {
//这里是点击圆圈切换图片
for (var i = 0; i < yuan.length; i++) {
yuan[i].num = i;
yuan[i].onmouseovr = function () { //注册事件
//下面要将循环除样式移除
for (var j = 0; j < yuan.length; j++) {
yuan[j].classList.remove("current");
}
//这里是为了将小圆点增加上样式
this.classList.add("current");
var num = this.num;
//到这里我们将要做的是点击小圆图就进行移动,像左边移动和上面的css一样的功能
//圆的定位 移动的距离就是N 乘以一张图片的宽度
//N就是选择的小圆点的坐标----i(num)
//图片的宽度box.offsetWidth, left
var left = num * li.offsetWidth;
console.log(num, box.offsetWidth, left);
imgs.style.left = `-${left}px`;
//这里小圆点联动左右按钮
for (var p = 0; p < yuan.length; p++) {
//清除全部样式(小圆点)
yuan[p].classList.add("current");
}
//给当前的小圆点增加样式
yuan[num].classList.add("current");
//这里这个位置比较关键,在上面设置完样式之后,记得将此num值给全局的i
index = this.num
}
}
//-----以上是点击小圆圈切换图片
//-----下面是开始右面老伯控制图片切换
// 首先定义一个全局的index,这个index的作用依旧是控制图片的切换
var index = 0;
right.onclick = function () {
index++;
//这里要对index做一个判断该,如果那点击一下index就会不停的增大
if (index === ul.children.length) {
//如果显示坐标为6的话,显示应该显示第一张图片,所以要复位即index=0
index = 0;
}
var left = index * li.offsetWidth;
console.log(index, box.offsetWidth, left);
imgs.style.left = `-${left}`;
//点击右面增加联动小圆的效果
for (var n = 0; n < yuan.lenth; n++) {
//清除全部的小圆样式
yuan[n].classList.remove("current");
}
//给当前的小圆增加样式
yuan[index].classList.add("current")
};
//-------以上结束右面轮播,控制图片的切换
//-------下面是开始左面轮播,控制图片切换
left.onclick = function (){
index--;
//这里同右点击一样,需要做一下判断,
console.log(index);
if (index === -1) {
index = ul.children.length - 1;
}
var left = index * li.offsetWidth;
console.log(index, box.offsetWidth, left);
imgs.style.left = `-${left}px`;
//这个位置做的是左边点击联动的小圆
for (var m = 0; m < yuan.length; m++) {
//清除全部样式小圆点
yuan[m].classList.add("current");
}
//给当前小圆增加样式
yuan[index].classList.add("current");
};
//-----上面是结束左面轮播,控制图像切换
//------下面开始设置自动轮波
var time = setInterval(function () {
right.onclick();
}, 1000);
//----以上是自动轮播结束
//---下面设置鼠标进来就停止开始
box.onmouseover = function () {
clearInterval(time);
};
//设置鼠标进来就停止结束
//设置鼠标出去就停止开始
box.onmouseout = function () {
time = setInterval(function() {
right.onclick();
}, 1000);
}
}
</script>
</html>