-
Notifications
You must be signed in to change notification settings - Fork 6
/
050-QQ幻灯片.html
209 lines (206 loc) · 8.5 KB
/
050-QQ幻灯片.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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
body,ul,h2{margin:0;padding:0; font:12px/20px Tahoma,"hiragino sans gb",Helvetica,Arial;}
img{border:none;}
li{list-style:none;}
body{background:#101010;}
#box{width:660px;height:330px;position:relative;overflow:hidden;margin:60px auto 0;}
#pic_list{position:relative;z-index:1;}
#pic_list li{position:absolute;left:0;top:0;opacity:0;fliter:alpha(opacity=0);z-index:1;}
.mark{height:90px;width:660px;background:#000;position:absolute;left:0;bottom:0;opacity:0.3;filter:alpha(opacity=30);}
#text_list{position:absolute;bottom:60px;left:50px;position:absolute;z-index:5;height:20px;overflow:hidden;}
#text_list h2{display:none;}
#text_list .show{display:block;}
#text_list a{color: #FFFFFF;font-family: "Microsoft YaHei";font-size: 18px;font-weight: normal;text-decoration:none;}
#ico_list{position:absolute;bottom:10px;left:12px;width:525px;overflow:hidden;height:46px;z-index:3;}
#ico_list ul{width:1050px;position:absolute;left:0;top:0;}
#ico_list li{width:75px;float:left;}
#ico_list li a{width:68px;padding-top:6px;display:block;}
#ico_list li a img{border: 2px solid #DFE8E4; height:36px;width:64px;background:#040303;opacity:0.7;filter:alpha(opacity=70);}
#ico_list .active{background:url(050_img/a_hover.gif) no-repeat center 0;}
#ico_list .active img{opacity:1;filter:alpha(opacity=100);border: 3px solid #fff; height:34px;width:62px;}
.btn{background:url(050_img/btn.gif) no-repeat;height:38px;width:38px;position: absolute;bottom:11px; opacity:0.5;filter:alpha(opacity=50);cursor:default;z-index:3;}
.showBtn{ opacity:1;filter:alpha(opacity=100);cursor:pointer;z-index:4;}
#btn_prev{right:56px;}
#btn_next{right:20px;background-position:right 0;}
</style>
<script src="js/move2.js"></script>
<script>
window.onload = function()
{
var oBox = document.getElementById("box");
var oPicUl = document.getElementById("pic_list");//大图ul
var aPicLi = oPicUl.getElementsByTagName("li");//大图
var oTextUl = document.getElementById("text_list");//文字ul
var aTextLi = oTextUl.getElementsByTagName("li");//文字li
var oIcoList = document.getElementById("ico_list");//小图div
var aIcoUl = oIcoList.getElementsByTagName("ul")[0];//小图
var aIcoLi = oIcoList.getElementsByTagName("li");//小图
var oBtnPrev = document.getElementById("btn_prev");//左按钮
var oBtnNext = document.getElementById("btn_next");//右按钮
var iNowUl = 0;
var iNow = 0;
for(var i = 0; i < aIcoLi.length; i++)
{
aIcoLi[i].index = i;
aIcoLi[i].onclick = function()
{
if(iNow == this.index)return;
iNow = this.index;
tab();
}
}
function tab()
{
for(var j = 0; j < aIcoLi.length; j++)
{
aIcoLi[j].className = "";
aTextLi[j].getElementsByTagName("h2")[0].className = "";
miaovStartMove(aPicLi[j],{opacity:0},MIAOV_MOVE_TYPE.BUFFER);
}
aIcoLi[iNow].className = "active";
aTextLi[iNow].getElementsByTagName("h2")[0].className = "show";
miaovStartMove(aPicLi[iNow],{opacity:100},MIAOV_MOVE_TYPE.BUFFER);
}
var timer = setInterval(interval, 3000);
oBox.onmouseover = function()
{
clearInterval(timer);
}
oBox.onmouseout = function()
{
timer = setInterval(interval, 3000);
}
function interval()
{
iNow++;
if(iNow >= aIcoLi.length)
{
iNow = 0;
}
if(iNow < iNowUl)
{
iNowUl = iNow
}
else if(iNow >= iNowUl + 7)
{
iNowUl = iNow - 6;
}
fixUlLeft();
tab();
}
oBtnPrev.onclick = function()
{
if(iNowUl > 0)
{
iNowUl--;
fixUlLeft();
}
}
oBtnNext.onclick = function()
{
if(iNowUl < aIcoLi.length - 7)
{
iNowUl++;
fixUlLeft();
}
}
function fixUlLeft()
{
oBtnPrev.className = iNowUl == 0?"btn":"btn showBtn";
oBtnNext.className = iNowUl == (aIcoLi.length - 7)?"btn":"btn showBtn";
miaovStartMove(aIcoUl,{left:- aIcoLi[0].offsetWidth*iNowUl},MIAOV_MOVE_TYPE.BUFFER);
}
}
</script>
</head>
<body>
<div id="box">
<ul id="pic_list">
<li style="z-index:2;opacity:1;fliter:alpha(opacity=100);">
<a ><img src="050_img/pic_1.jpg" alert="妙味课堂_js精品课程"/></a>
</li>
<li>
<a ><img src="050_img/pic_2.jpg" alert="妙味课堂_js精品课程"/></a>
</li>
<li>
<a ><img src="050_img/pic_3.jpg" alert="妙味课堂_js精品课程"/></a>
</li>
<li>
<a ><img src="050_img/pic_4.jpg" alert="妙味课堂_js精品课程"/></a>
</li>
<li>
<a ><img src="050_img/pic_5.jpg" alert="妙味课堂_js精品课程"/></a>
</li>
<li>
<a ><img src="050_img/pic_6.jpg" alert="妙味课堂_js精品课程"/></a>
</li>
<li>
<a ><img src="050_img/pic_7.jpg" alert="妙味课堂_js精品课程"/></a>
</li>
<li>
<a ><img src="050_img/pic_8.jpg" alert="妙味课堂_js精品课程"/></a>
</li>
<li>
<a ><img src="050_img/pic_9.jpg" alert="妙味课堂_js精品课程"/></a>
</li>
<li>
<a ><img src="050_img/pic_10.jpg" alert="妙味课堂_js精品课程"/></a>
</li>
<li>
<a ><img src="050_img/pic_11.jpg" alert="妙味课堂_js精品课程"/></a>
</li>
<li>
<a ><img src="050_img/pic_12.jpg" alert="妙味课堂_js精品课程"/></a>
</li>
<li>
<a ><img src="050_img/pic_13.jpg" alert="妙味课堂_js精品课程"/></a>
</li>
<li>
<a ><img src="050_img/pic_14.jpg" alert="妙味课堂_js精品课程"/></a>
</li>
</ul>
<div class="mark"></div>
<ul id="text_list">
<li><h2 class="show"><a href="#">《武则天秘史》[至22集]姐姐与皇上偷情，媚娘抓奸在床...</a></h2></li>
<li><h2><a href="#">《无底洞》金钱、美女、权利、复仇等欲望让人不可自拔...</a></h2></li>
<li><h2><a href="#">《巴黎宝贝》邓超巴黎当奶爸，上演基情、卖萌、跨国恋..</a></h2></li>
<li><h2><a href="#">《我的女儿是花儿》[至3集]“富二代”冰王子恋上贫家女..</a></h2></li>
<li><h2><a href="#">《法证先锋3》[至26集]写字楼惊现“女僵尸”尸体！</a></h2></li>
<li><h2><a href="#">《非常了得》孟非郭德纲大曝台下私生活，内地Hold姐来挑战</a></h2></li>
<li><h2><a href="#">第二届九分钟电影11月20日独家首映 视觉盛宴恭迎各位看官</a></h2></li>
<li><h2><a href="#">《快女微电影》 洪辰脸伤痊愈 快女微电影收官作复拍</a></h2></li>
<li><h2><a href="#">《称心如意》京城第一“育婴男”Hold住全场 萝莉热舞走光</a></h2></li>
<li><h2><a href="#">《男人帮》[全30集]悲喜双响炮，一个完美结局</a></h2></li>
<li><h2><a href="#">《辛亥革命》成龙、赵文瑄、李冰冰、胡歌演绎革命腥风血雨</a></h2></li>
<li><h2><a href="#">《李献计历险记》房祖名患差时症为寻女友开启超时空冒险</a></h2></li>
<li><h2><a href="#">Justin bieber女友动感热单全球首发。</a></h2></li>
<li><h2><a href="#">第八届中国（重庆）国际园林博览会</a></h2></li>
</ul>
<div id="ico_list">
<ul>
<li class="active"><a href="#"><img src="050_img/ico_1.jpg" alt="妙味课堂富有人性化的IT培训"/></a></li>
<li><a href="#"><img src="050_img/ico_2.jpg" alt="妙味课堂富有人性化的IT培训"/></a></li>
<li><a href="#"><img src="050_img/ico_3.jpg" alt="妙味课堂富有人性化的IT培训"/></a></li>
<li><a href="#"><img src="050_img/ico_4.jpg" alt="妙味课堂富有人性化的IT培训"/></a></li>
<li><a href="#"><img src="050_img/ico_5.jpg" alt="妙味课堂富有人性化的IT培训"/></a></li>
<li><a href="#"><img src="050_img/ico_6.jpg" alt="妙味课堂富有人性化的IT培训"/></a></li>
<li><a href="#"><img src="050_img/ico_7.jpg" alt="妙味课堂富有人性化的IT培训"/></a></li>
<li><a href="#"><img src="050_img/ico_8.jpg" alt="妙味课堂富有人性化的IT培训"/></a></li>
<li><a href="#"><img src="050_img/ico_9.jpg" alt="妙味课堂富有人性化的IT培训"/></a></li>
<li><a href="#"><img src="050_img/ico_10.jpg" alt="妙味课堂富有人性化的IT培训"/></a></li>
<li><a href="#"><img src="050_img/ico_11.jpg" alt="妙味课堂富有人性化的IT培训"/></a></li>
<li><a href="#"><img src="050_img/ico_12.jpg" alt="妙味课堂富有人性化的IT培训"/></a></li>
<li><a href="#"><img src="050_img/ico_13.jpg" alt="妙味课堂富有人性化的IT培训"/></a></li>
<li><a href="#"><img src="050_img/ico_14.jpg" alt="妙味课堂富有人性化的IT培训"/></a></li>
</ul>
</div>
<a href="#" id="btn_prev" class="btn"></a>
<a href="#" id="btn_next" class="btn showBtn"></a>
</div>
</body>
</html>