javascript - 图片的幻灯片效果
浏览数：31 /
时间：2015年06月08日
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 onload="select_play()">
<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>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
