这个想了有一段时间,开始没绕过那个坎,最后想通了,哇,成功的那一刻,真是太舒适了.
贴代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a{
text-decoration: none;
color: black;
}
li{
display: inline-block;
border: 1px gray solid;
float: left;
padding: 5px;
padding-left: 17px;
padding-right: 17px;
font-family: "微软雅黑";
border-bottom: none;
background-color: aliceblue;
}
img{
float: left;
position: absolute;
left: 48px;
top:50px ;
}
p{
position: absolute;
left: 165px;
top: 280px;
}
</style>
</head>
<body>
<ul>
<span><li><a href="#" onclick="aa(0)">热点</a></li></span>
<span><li><a href="#" onclick="aa(1)">聚焦</a></li></span>
<span><li><a href="#" onclick="aa(2)">天下</a></li></span>
<span><li><a href="#" onclick="aa(3)">奇闻</a></li></span>
<span><li><a href="#" onclick="aa(4)">军事</a></li></span>
<div id="a1">
<img src="img/1.jpg"/>
<p>法国大选</p>
</div>
<div id="a2">
<img src="img/2.jpg"/>
<p>121</p>
</div>
<div id="a3">
<img src="img/3.jpg"/>
<p>123123123</p>
</div>
<div id="a4">
<img src="img/4.jpg"/>
<p>12312312312</p>
</div>
<div id="a5">
<img src="img/5.jpg"/>
<p>213123123</p>
</div>
</ul>
<script type="text/javascript">
var a=document.getElementsByTagName("div");
for(i=1;i<a.length;i++)
a[i].style.display="none";//这个让开始的时候只显示第一张图片,楼主这里不用onload了.
var w=0;
function aa()
{
for(i=0;i<5;i++)
{
a[i].style.display="none";
}//让所有图片消失,便于让后面的图片出现
a[w].style.display="block";//让图片出现
w++;
if(w==5)
{
w=0;
}
}
setInterval("aa()",1000);//时间函数
</script>
</body>
</html>
哇,太舒适了。小成就啊