您的位置：首页 > Web前端 > JavaScript

js练习8(幻灯片切换效果)

2013-01-23 16:05 169 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>幻灯片切换</title>
<style>
.body{text-align:center;}
li,ul{list-style:none;margin:0px;padding:0px;}
#showPlay{
text-align:left;
width:890px;
overflow:hidden;
margin:0px auto;
height:350px;
position:relative;
}
#dopics{
opacity: 0.4;
background: none repeat scroll 0 0 #000;
height: 10px;
padding: 5px 10px;
position: absolute;
width:870px;
text-align:right;
clear:both;
bottom:0px;
}
#dopics span{
opacity: 0.4;
background: none repeat scroll 0 0 #FFFFFF;
cursor: pointer;
display: inline-block;
height: 10px;
margin-left: 5px;
width: 25px;
text-align:center;
color:#000;
font-weight:bold;
font-size:10px;
height:10;
line-height:10px;

}
</style>
</head>
<body>
<div id="showPlay">
<div id="pics">
<ul>
<li><a href=""><img src="slideimg_1.jpg" /></a></li>
<li><a href=""><img src="slideimg_2.jpg" /></a></li>
<li><a href=""><img src="slideimg_3.jpg" /></a></li>
<li><a href=""><img src="slideimg_4.jpg" /></a></li>
<li><a href=""><img src="slideimg_5.jpg" /></a></li>
<li><a href=""><img src="slideimg_6.jpg" /></a></li>
</ul>
</div>
<div id="dopics">
</div>
</div>
<script>
var time;
var n=1;
var ul=document.getElementById("pics").getElementsByTagName("ul")[0];

//5秒钟进行交替图片
time=setInterval("run()",5000);

//显示图片
function run(){
++n;
if(n>6){
n=1;
}
ul.innerHTML="<li><a href=''><img src='slideimg_"+n+".jpg' /></a></li>";
}

//根据图片来生成对应的按钮
function getBtn(){
var liList=document.getElementById("pics").getElementsByTagName("li");
var dopics=document.getElementById("dopics");
var str="";
for(var i=0;i<liList.length;i++){
str+="<span>"+(i+1)+"</span>";
}
//alert(str);
dopics.innerHTML=str;
}
getBtn();

//鼠标移到按钮上时
var spanList=document.getElementById("dopics").getElementsByTagName("span");
for(var j=1;j<spanList.length+1;j++){
spanList[j-1].onmouseover=function(){
clearInterval(time);
//这里的this.innerHTML不能使j因为循环完的j=7
ul.innerHTML="<li><a href=''><img src='slideimg_"+this.innerHTML+".jpg' /></a></li>";
time=setInterval("run()",9000);
}
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航