javascript走马灯广告的实现

最新推荐文章于 2024-06-03 20:03:03 发布

gfdonx

最新推荐文章于 2024-06-03 20:03:03 发布

阅读量631

点赞数

分类专栏： java script

本文链接：https://blog.youkuaiyun.com/gfdonx/article/details/49586833

版权

java script 专栏收录该内容

6 篇文章

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script type="text/javascript">

function show(number){
var imgs = document.getElementsByName("showimg");
for(var i = 0 ; i < imgs.length; i++){
		if(i+1 != number){
			imgs[i].style.display = "none";
		}else{
			imgs[i].style.display = "block";
		}
	}
}

var i = 1;
function disptime( ){
if(i > 4){
	i = 1
}
show(i);
i = i+1;
setTimeout("disptime()",2000);
}



</script>
<style type="text/css">
#main{
width:500px;
height:500px;
margin:100px auto;
border:solid red 1px;
}

ul{
list-style:none;
position:absolute;

margin:465px 130px 10px 130px;
z-index:800;
}

li{
width:10px;
height:10px;
float:left;
margin-left:25px;
}



#main .img1{
position:absolute;
border:1px red solid;
width:478px;
height:458px;
}

li img{
width:30px;
height:30px;

}

</style>
<title>无标题文档</title>
</head>

<body onLoad="disptime( )">
<div id="main">


<img src="../image/蜗牛.jpg" class="img1" name="showimg">
<img src="../image/动漫1.jpg" class="img1" name="showimg">
<img src="../image/动漫2.jpg" class="img1" name="showimg">
<img src="../image/动漫3.jpg" class="img1" name="showimg">

<ul>
<li><img src="../image/1.jpg" onClick="show(1)"></li>
<li><img src="../image/2.jpg" onClick="show(2)"></li>
<li><img src="../image/3.jpg" onClick="show(3)"></li>
<li><img src="../image/4.jpg" onClick="show(4)"></li>
</ul>
</div>
</body>
</html>