-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmy_自动对象轮播.html
157 lines (150 loc) · 3.99 KB
/
my_自动对象轮播.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body,div,ul,li{margin: 0;padding: 0;list-style: none;}
body{
background: #000;
}
#box{
margin: 10px auto;
width: 492px;
height: 172px;
border: 8px solid #fff;
border-radius: 5px;
position: relative;
}
#box .list{
width: 490px;
height: 170px;
border: 1px solid blue;
overflow: hidden;
position: relative;
}
#box .list ul{
position: absolute;
top: 0;
left: 0;
}
#box .list ul li{
width: 490px;
height: 170px;
overflow: hidden;
}
#box .list-count{
position: absolute;
right: 0;
bottom: 5px;
cursor: pointer;
}
#box .list-count li{
color: #fff;
float: left;
margin-right: 5px;
border-radius: 5px;
background: #f60;
width: 20px;
height: 20px;
text-align: center;
font: 12px/20px Arial;
opacity: 0.7;
filter: alpha(opacity=70);
}
#box .list-count li.current{
opacity: 1;
filter: alpha(opacity=100);
}
</style>
</head>
<body>
<div id="box">
<div class="list">
<ul>
<li><img src="../image/landscape_map/055.jpg" width="490" height="170"></li>
<li><img src="../image/landscape_map/037.jpg" width="490" height="170"></li>
<li><img src="../image/landscape_map/039.jpg" width="490" height="170"></li>
<li><img src="../image/landscape_map/032.jpg" width="490" height="170"></li>
<li><img src="../image/landscape_map/038.jpg" width="490" height="170"></li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
//获取ID
var $=function(id){return typeof id==="string"?document.getElementById(id):id}
//获取tagName
var $$=function(tagName,oParent){return (oParent||document).getElementsByTagName(tagName)}
//自动轮播对象
var obj_Auto=function(id){this.init(id)};
obj_Auto.prototype={
init:function(id){
var oThis=this;
this.oBox=$(id);
this.oUl=$$("ul",this.oBox)[0];
this.aImg=$$("img",this.oBox);
this.createBtn();
this.aBtn=$$("li",this.oCount);
this.iNow=0;
this.start_timer=null;
this.auto_timer=null;
for(var i=0;i<this.aBtn.length;i++){
this.aBtn[i].index=i;
this.aBtn[i].onmouseover=function(){
oThis.iNow=this.index;
//去除自动播放时的bug
//另外这两句话位置不能错了，否则就是上一次的Show了
oThis.Show();
}
}
this.oBox.onmouseout=function(){
oThis.Auto();
}
this.oBox.onmouseover=function(){
clearInterval(oThis.auto_timer);
}
},
createBtn:function(){
//碎片传递，用于提升效率，将所有新增先添加到碎片中，防止多次渲染导致的流畅°下降问题。
//另外一种方法：可以先扔进数组里,主要多次for循环的创建
this.oCount=document.createElement("ul");
this.oFrag=document.createDocumentFragment();
this.oCount.className="list-count";
for(var i=0;i<this.aImg.length;i++){
var oLi=document.createElement("li");
oLi.innerHTML=i+1;
this.oFrag.appendChild(oLi);
}
this.oCount.appendChild(this.oFrag);
this.oBox.appendChild(this.oCount);
},
Show:function(){
for(var i=0;i<this.aBtn.length;i++)this.aBtn[i].className="";
this.aBtn[this.iNow].className="current";
this.Move(-this.iNow*this.aImg[0].offsetHeight);
},
Move:function(distance){
var oThis=this;
clearInterval(this.start_timer);
this.start_timer=setInterval(function(){
var speed=(distance-oThis.oUl.offsetTop)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//若是不总是向上取整，会永远到不了
oThis.oUl.offsetTop==distance?clearInterval(oThis.start_timer)
:oThis.oUl.style.top=oThis.oUl.offsetTop+speed+"px";
},30)
},
Auto:function(){
var oThis=this;
clearInterval(this.suto_timer);
this.auto_timer= setInterval(function(){
oThis.iNow<oThis.aImg.length-1? oThis.iNow++:(oThis.iNow=0);
oThis.Show();
},2000);
}
}
new obj_Auto("box");//在没有创建之前不可以直接
var x=new obj_Auto("box");
</script>
</html>