javascript 代码:
<script type="text/javascript">
function select_play() {
var select_play_box = document.getElementById("select_play_box");
var aUl = select_play_box.getElementsByTagName("ul");
var aImg = aUl[0].getElementsByTagName("li");
var aNum = aUl[1].getElementsByTagName("li");
var timer = play = null;
var i = index = 0;
//切换按钮
for (i = 0; i < aNum.length; i++) {
aNum[i].index = i;
aNum[i].onmouseover = function () {
show(this.index)
}
}
//鼠标划过关闭定时器
select_play_box.onmouseover = function () {
clearInterval(play)
};
//鼠标离开启动自动播放
select_play_box.onmouseout = function () {
autoPlay()
};
//自动播放函数
function autoPlay() {
play = setInterval(function () {
index++;
index >= aImg.length && (index = 0);
show(index);
}, 2500);
}
autoPlay();//应用
//图片切换, 淡入淡出效果
function show(a) {
index = a;
var alpha = 0;
for (i = 0; i < aNum.length; i++)aNum[i].className = "";
aNum[index].className = "current";
clearInterval(timer);
for (i = 0; i < aImg.length; i++) {
aImg[i].style.opacity = 0;
aImg[i].style.filter = "alpha(opacity=0)";
}
timer = setInterval(function () {
alpha += 2;
alpha > 100 && (alpha = 100);
aImg[index].style.opacity = alpha / 100;
aImg[index].style.filter = "alpha(opacity = " + alpha + ")";
alpha == 100 && clearInterval(timer)
}, 20);
}
}
</script>
html代码:
<div id="select_play_box">
<ul class="select_play_list">
<li class="select_play_current"><img src="d/a.jpg"/></li>
<li><img src="d/b.jpg"/></li>
<li><img src="d/c.jpg"/></li>
<li><img src="d/d.jpg"/></li>
</ul>
<ul class="select_play_count">
<li class="select_play_current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
css代码:
1 #select_play_box {
2 position: relative;
3 width: 315px;
4 height: 272px;
5 background: #fff;
6 border-radius: 5px;
7 border: 8px solid #fff;
8 margin: 5px auto;
9 }
10 #select_play_box ul {
11 list-style-type: none;
12 }
13
14 #select_play_box ul, li {
15 margin: 0;
16 padding: 0;
17 }
18
19 #select_play_box .select_play_list {
20 position: relative;
21 width: 100%;
22 height: 100%;
23 overflow: hidden;
24 border: 1px solid #ccc;
25 }
26
27 #select_play_box .select_play_list li {
28 position: absolute;
29 top: 0;
30 margin-left: 15px;
31 margin-top: 5px;
32 width: 300px;
33 height: 170px;
34 opacity: 0;
35 filter: alpha(opacity=0);
36 }
37 #select_play_box .select_play_list img {
38 width:250px;
39 height: 250px;
40 }
41
42 #select_play_box .select_play_list li.select_play_current {
43 opacity: 1;
44 filter: alpha(opacity=100);
45 }
46
47 #select_play_box .select_play_count {
48 position: absolute;
49 right: 0;
50 bottom: 5px;
51 }
52
53 #select_play_box .select_play_count li {
54 text-align: center;
55 color: #fff;
56 float: left;
57 width: 20px;
58 height: 20px;
59 cursor: pointer;
60 margin-right: 5px;
61 overflow: hidden;
62 background: #F90;
63 opacity: 0.7;
64 filter: alpha(opacity=70);
65 border-radius: 20px;
66 }
67
68 #select_play_box .select_play_count li.select_play_current {
69 color: #fff;
70 opacity: 1;
71 filter: alpha(opacity=100);
72 font-weight: 700;
73 background: #f60;
74 }
完整html页面代码:
<!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>javascript - 图片的幻灯片效果</title>
<link type="text/css" href="sy/select_auto_image.css" rel="stylesheet"/>
</head>
<body >
<div id="select_play_box">
<ul class="select_play_list">
<li class="select_play_current"><img src="d/a.jpg"/></li>
<li><img src="d/b.jpg"/></li>
<li><img src="d/c.jpg"/></li>
<li><img src="d/d.jpg"/></li>
</ul>
<ul class="select_play_count">
<li class="select_play_current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script type="text/javascript">
function select_play() {
var select_play_box = document.getElementById("select_play_box");
var aUl = select_play_box.getElementsByTagName("ul");
var aImg = aUl[0].getElementsByTagName("li");
var aNum = aUl[1].getElementsByTagName("li");
var timer = play = null;
var i = index = 0;
//切换按钮
for (i = 0; i < aNum.length; i++) {
aNum[i].index = i;
aNum[i].onmouseover = function () {
show(this.index)
}
}
//鼠标划过关闭定时器
select_play_box.onmouseover = function () {
clearInterval(play)
};
//鼠标离开启动自动播放
select_play_box.onmouseout = function () {
autoPlay()
};
//自动播放函数
function autoPlay() {
play = setInterval(function () {
index++;
index >= aImg.length && (index = 0);
show(index);
}, 2500);
}
autoPlay();//应用
//图片切换, 淡入淡出效果
function show(a) {
index = a;
var alpha = 0;
for (i = 0; i < aNum.length; i++)aNum[i].className = "";
aNum[index].className = "current";
clearInterval(timer);
for (i = 0; i < aImg.length; i++) {
aImg[i].style.opacity = 0;
aImg[i].style.filter = "alpha(opacity=0)";
}
timer = setInterval(function () {
alpha += 2;
alpha > 100 && (alpha = 100);
aImg[index].style.opacity = alpha / 100;
aImg[index].style.filter = "alpha(opacity = " + alpha + ")";
alpha == 100 && clearInterval(timer)
}, 20);
}
}
</script>
</body>
</html>
时间： 2024-10-29 19:13:36