-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlunbo.html
225 lines (218 loc) · 5.26 KB
/
lunbo.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul{
margin: 0px;
padding: 0px;
}
ul li{
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
a{
margin: 0px;
padding: 0px;
}
#wrapper{
margin: 0 auto;
width: 1280px;
height: 800px;
position: relative;
}
#imgs{
width: 1280px;
height: 100%;
overflow: hidden;
float: left;
position: relative;
}
#imgs ul{
position: absolute;
z-index: 1;
width: 7680px;
height: 400px;
left: -1280px;
}
#nav{
width: 100px;
height: 20px;
float: left;
position: absolute;
right: 10px;
bottom: 10px;
z-index: 5;
}
#nav ul li a{
width: 20px;
height: 20px;
line-height: 20px;
display: inline-block;
background: #FFF;
border-radius: 10px;
margin-right: 5px;
text-align: center;
font-size: 12px;
}
#preous,#next{
width: 100px;
background: #000;
font-size: 20px;
font-weight: 900;
text-align: center;
height: 80px;
line-height: 80px;
position: absolute;
top: 50%;
color: #FFF;
z-index: 3;
}
#preous{
left: 0px;
}
#next{
right: 0px;
}
#nav ul li a.current{
background: red;
color: #FFF;
}
#nav ul li a.hidden{
background: #FFF;
color: #000;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="imgs">
<ul>
<li><a href=""><img src="./4.jpg" alt=""></a></li>
<li><a href=""><img src="./1.jpg" alt=""></a></li>
<li><a href=""><img src="./2.jpg" alt=""></a></li>
<li><a href=""><img src="./3.jpg" alt=""></a></li>
<li><a href=""><img src="./4.jpg" alt=""></a></li>
<li><a href=""><img src="./1.jpg" alt=""></a></li>
</ul>
</div>
<div class="clear"></div>
<div id="nav">
<ul>
<li><a class="current">1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>
</ul>
</div>
<div id="preous"><</div>
<div id="next">></div>
</div>
<script type="text/javascript">
//思路：1、先处理好左右两个按钮，来回切换，能够保证图片正常切换
//2、能正常来还切换之后，在来处理右下角的小圆点，跟随者图片切换来变化
//3、在切换中加上动画
//4、开启一个定时器，两秒调用一次右边按钮的onclick
//5、解决定时器和点击右边按钮以及图片切换动画定时器的冲突， 在点击按钮的时候，先停止轮播定时器和动画定时器，
//（当前有可能上一张图片动画还未完成，然后又清除了动画，所以要把图片的left值设置是当前图片距离左边距）
//6、处理远点的onmouse事件，和点击左右两个按钮一致
window.onload=function(){
var imgs_div=document.getElementById("imgs");
var nav_div=document.getElementById("nav");
//获取到图片轮播的ul对象数组
var imgsUl=imgs_div.getElementsByTagName("ul")[0];
//获取到原点的ul对象数组
var nav=nav_div.getElementsByTagName("ul")[0];
//上一个
var prious=document.getElementById("preous");
//下一个
var next =document.getElementById("next");
var timer;
var animTimer;
var index=1;
play();
prious.onclick=function(){
initImgs(index);
index-=1;
if(index<1){
index=4;
}
animate(1280);
btnShow(index);
}
next.onclick=function(){
initImgs(index);
index+=1;
if(index>4){
index=1;
}
animate(-1280);
btnShow(index);
}
function animate(offset){
/**
* offsetLeft值跟offsetTop值的获取跟父级元素没关系，
* 而是跟其上一级的定位元素(除position:static;外的所有定位如fixed,relative,absolute)有关系
*/
var newLeft=parseInt(imgsUl.offsetLeft)+offset;
// imgsUl.style.left=newLeft;
// console.log("定时器外面:此时offsetLeft"+imgsUl.offsetLeft+">>newLeft:"+newLeft);
if(newLeft>-1280){
// imgsUl.style.left=-5120+"px";
donghua(-5120);
}else if(newLeft<-5120){
// imgsUl.style.left=-1280+"px";
donghua(-1280);
}else{
donghua(newLeft);
}
}
function donghua(offset){
clearInterval(animTimer);
animTimer=setInterval(function(){
imgsUl.style.left=imgsUl.offsetLeft+(offset-imgsUl.offsetLeft)/10 + "px";
if(imgsUl.offsetLeft-offset<10&&imgsUl.offsetLeft-offset>-10){//如果偏移量已经等于指定好的偏移量，则秦楚定时器
imgsUl.style.left=offset+"px";
clearInterval(animTimer);
//开启定时轮播
play();
}
},20);
}
function initImgs(cur_index){
clearInterval(timer);
clearInterval(animTimer);
var off=cur_index*1280;
imgsUl.style.left=-off+"px";
}
function play(){
timer=setInterval(function(){
next.onclick();
},2000)
}
function btnShow(cur_index){
var list=nav.children;//nav 下的li列表
for(var i=0;i<nav.children.length;i++){
nav.children[i].children[0].className="hidden";
}
nav.children[cur_index-1].children[0].className="current";
}
for(var i=0;i<nav.children.length;i++){
nav.children[i].index=i;
var sd=nav.children[i].index;
nav.children[i].onmouseover=function(){
index=this.index+1;
initImgs(this.index+1);
btnShow(this.index+1);
}
nav.children[i].onmouseout=function(){
play();
}
}
}
</script>
</body>
</html>