-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmy_淡入淡出.html
156 lines (143 loc) · 3.34 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div,ul,li{
margin:0;
padding:0;
list-style: none;
border: 0;
}
body{
background: #f0f8ff;
}
#box{
margin:10px auto;
position: relative;
/*position内容，relative和absolute自行学习!!!!!!!absolute很重要*/
width: 502px;
height: 202px;
/*此处多的两个边框属性用于.list-image的border*/
border: 8px solid #fff;
}
.list-image{
width: 500px;
height: 200px;
border: 1px solid purple;
position: relative;
overflow: hidden;
}
.list-image li{
width: 500px;
height: 200px;
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.list-image li.current{
opacity: 1;
filter: alpha(opacity=100);
/*filter是兼容写法，兼容IE8以下的*/
}
.list-number{
position: absolute;
right: 0;
bottom: 5px;
}
.list-number li{
float: left;
color: #fff;
background: #f60;
width: 20px;
height: 20px;
border-radius: 20px;
cursor: pointer;
margin-right: 5px;
text-align: center;
font:10px/20px Arial;
opacity: 0.7;
filter: alpha(opacity=70);
}
.list-number li.current{
opacity: 1;
filter: alpha(opacity=100);
}
</style>
</head>
<body>
<div id="box">
<ul class="list-image">
<li class="current"><img src="../image/landscape_map/047.jpg" width="500px" height="200px"></li>
<li><img src="../image/landscape_map/041.jpg" width="500px" height="200px"></li>
<li><img src="../image/landscape_map/042.jpg" width="500px" height="200px"></li>
<li><img src="../image/landscape_map/043.jpg" width="500px" height="200px"></li>
<li><img src="../image/landscape_map/037.jpg" width="500px" height="200px"></li>
</ul>
<ul class="list-number">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
<script type="text/javascript">
var oBox=document.getElementById("box");
var oUl=oBox.getElementsByTagName("ul");
var oImage=oUl[0].getElementsByTagName("li");
var oNumber=oUl[1].getElementsByTagName("li");
var index=0;
var timer=null; //用于实现淡入淡出
var play_timer=null;//用于实现自动的计时器
for(var i=0;i<oNumber.length;i++){
oNumber[i].index=i;
oNumber[i].onmouseover=function(){
show(this.index);
}
}
function show(x){
for(var i=0;i<oNumber.length;i++){
oNumber[i].className="";
// oImage[i].className="";
//我们发现以上的""的css元素已经被我们改变，因此这种方法不行。
oImage[i].style["opacity"]=0;
//上面这句等同于 oImage[i].style.opacity=0;
oImage[i].style.filter="alpha(opacity=0)";
}
oNumber[x].className="current";
// oImage[x].className="current";
//注释掉上方，开始我们不突兀的淡入淡出轮播
var alpha=0;
//变量记录透明度变化(淡入淡出实现的根本)
clearInterval(timer);
//停止计时器，自行体会，主要用于切换之中
timer=setInterval(function(){
alpha+=2;
alpha>100 && (alpha=100);
oImage[x].style.opacity=alpha/100;
alpha==100 && clearInterval(timer);
},20);
index=x;
}
oBox.onmouseover=function(){
clearInterval(play_timer);
}
function Auto(){
play_timer=setInterval(function(){
if(index<oNumber.length-1){
index++;
}else{
index=0;
}
show(index);
},2000);
}
oBox.onmouseout=function(){
Auto();
}
Auto();
</script>
</html>