利用js实现自动轮播

这个想了有一段时间，开始没绕过那个坎，最后想通了，哇，成功的那一刻，真是太舒适了.
贴代码

<!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>

哇，太舒适了。小成就啊

利用js实现自动轮播

猜你喜欢