原生JS轮播图
1 <!DOCTYPE html>
2 <html>
3 <head>
4
<meta charset=http://www.mamicode.com/"UTF-8">
5
<title>轮播图</title>
6 </head>
7 <style>
8
*{
9
margin:0px;
10
padding:0px;
11 }
12
13 li{
14
list-style: none; /*打消li默认的前缀*/
15 }
16
17 img{
18
display: block;
/*解决图片之间3px的问题*/
19 }
20
21
/*用一个容器包裹起来*/
22 #container{
23
position: relative;
24
margin: 0 auto;
25
margin-top: 130px;
26
width: 750px;
27
height: 352px;
28
border: 1px solid #ccc;
29 }
30
31
/*隐藏失容器所有的图片*/
32
#container>ul>li{
33
position:absolute;
34
display: none;
35
36 }
37
38
/*显示容器中的图片active属性的那张*/
39
#container>ul>li.active{
40
display: block;
41 }
42
43 #buttons{
44
position: absolute;
45
width: 180px;
46
height: 20px;
47
bottom: 20px;
48
left: 50%;
49
margin-left: -90px;
50
border-radius: 20px;
51
background-color:rgba(255, 255, 255, 0.2);
52 }
53
54
/*弹性盒子*/
55
#buttons>ul{
56
width: 100%;
57
height: 100%;
58
display: flex;
59
align-items: center;
/*垂直标的目的居中*/
60
justify-content:space-around; /*程度标的目的居中*/
61 }
62
63
#buttons>ul>li{
64
width: 20px;
65
height: 20px;
66
border-radius: 50%;
67
text-align: center;
68
background-color: #FFF;
69 }
70
71
#buttons>ul>li.active_butto{
72
background-color: #DB192A;
73 }
74
#container>.arrow{
75
position: absolute;
76
width: 30px;
77
height: 60px;
78
top: 50%;
79
margin-top: -30px;
80
font-size: 30px;
81
line-height: 60px;
82
text-align: center;
83
background-color: rgba(0, 0, 0, 0.1);
84
user-select: none;
/*禁止选中文字(多次点击箭头会选中箭头)*/
85 }
86
#container>.arrow:hover{
87
background: rgba(0, 0, 0, 0.5);
88
cursor: pointer;
89 }
90
#container>#left{
91
left: 0px;
92 }
93
#container>#right{
94
right: 0px;
95 }
96
97 </style>
98 <body>
99
<div id=http://www.mamicode.com/"container">
100
<!-- 图片 -->
101
<ul>
102
<li class=http://www.mamicode.com/"active"><img src=http://www.mamicode.com/"./1.jpg" alt=http://www.mamicode.com/"1"></li>
103
<li><img src=http://www.mamicode.com/"./2.jpg" alt=http://www.mamicode.com/"2"></li>
104
<li><img src=http://www.mamicode.com/"./3.jpg" alt=http://www.mamicode.com/"3"></li>
105
<li><img src=http://www.mamicode.com/"./4.jpg" alt=http://www.mamicode.com/"4"></li>
106
<li><img src=http://www.mamicode.com/"./5.jpg" alt=http://www.mamicode.com/"5"></li>
107
</ul>
108
<!-- 圆点 -->
109
<div id=http://www.mamicode.com/"buttons">
110
<ul>
111
<li class=http://www.mamicode.com/"active_butto">1</li>
112
<li>2</li>
113
<li>3</li>
114
<li>4</li>
115
<li>5</li>
116
</ul>
117
</div>
118
<!-- 箭头 -->
119
<span id=http://www.mamicode.com/"left" class=http://www.mamicode.com/"arrow"><</span>
120
<span id=http://www.mamicode.com/"right" class=http://www.mamicode.com/"arrow">></span>
121
</div>
122 <script>
123
var container = document.getElementById("container"); /* 获取元素*/
124
var bList = document.getElementById("buttons");
125
var left = document.getElementById("left");
126
var right = document.getElementById("right");
127
var lis = container.children[0].children;
/* .children查找该元素的所有子类,返回的是类数组*/
128
var blis = bList.children[0].children;
129
var len =http://www.mamicode.com/ lis.length;
130
var index = 0;
131
var timer;
132
var next =http://www.mamicode.com/ function() {
133
lis[index].removeAttribute("class");
/*移除属性*/
134
blis[index].removeAttribute("class");
/*移除属性*/
135
index++;
/*设置标识表记标帜*/
136
if(index ==http://www.mamicode.com/ len){
137
index = 0;
138
}
139
lis[index].setAttribute("class", "active");
/*添加属性*/
140
blis[index].setAttribute("class", "active_butto");
/*添加属性*/
141 }
142
var autoPlay =http://www.mamicode.com/ function() {
143
timer =http://www.mamicode.com/ setInterval(function() {
144
next();
145
},2000);
146 }
147 autoPlay();
148
container.onmouseenter =http://www.mamicode.com/ function() {
149
clearInterval(timer);
150 }
151
container.onmouseleave =http://www.mamicode.com/ function() {
152
autoPlay();
153 }
154
for(var i = 0; i < blis.length; i++) {
155
blis[i].onmou搜索引擎优化ver = (function(i) {
/*使用闭包解决函数循环先执行导致i一直是数组的length-1的问题*/
156
return function() {
157
lis[index].removeAttribute("class");
/*移除属性*/
158
blis[index].removeAttribute("class");
159
index =http://www.mamicode.com/ i;
160
lis[index].setAttribute("class", "active");
/*添加属性*/
161
blis[index].setAttribute("class", "active_butto");
162
};
163
})(i);
164 }
165
left.onclick =http://www.mamicode.com/ function() {
166
lis[index].removeAttribute("class");
/*移除属性*/
167
blis[index].removeAttribute("class");
168
index--;
169
if(index < 0){
170
index = blis.length - 1;
171
}
172
lis[index].setAttribute("class", "active");
/*添加属性*/
173
blis[index].setAttribute("class", "active_butto");
/*添加属性*/
174 }
175
right.onclick =http://www.mamicode.com/ function() {
176
next();
177 }
178 </script>
179 </body>
180 </html>
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/32191.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")