轮播图片

最新推荐文章于 2025-09-09 08:37:13 发布

转载最新推荐文章于 2025-09-09 08:37:13 发布 · 146 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wzs9/p/8743214.html

文章标签：

<style type="text/css">
	*{
	margin:auto;
	padding:0px;}
	#datu{
	width:600px;
	height:400px;}
	.tu{
	display:none;}
	#kuang{
	width:600px;
	height:20px;
	z-index:1;
	position:absolute;
	top:385px;
	left:385px;}
	.dian{
	width:10px;
	height:10px;
	border-radius:50%;
	border:1px solid #F00;
	float:left;}
	</style>
	</head>

	<body>
	<div id="datu">
	<img class="tu" src="../QQ截图20171008192118.png" width="600px" height="400px" style="display:block;" />
	<img class="tu" src="../onmyoji-003.jpg" width="600px" height="400px" />
	<img class="tu" src="../壁纸.png" width="600px" height="400px" />
	</div>

	<div id="kuang">
	<div class="dian" x="0" style="background-color:blue;"></div>
	<div class="dian" x="1"></div>
	<div class="dian" x="2"></div>
	</div>
	</body>
	</html>
	<script type="text/javascript">
	window.setInterval("Tu()",1000)
	var x =0;
	function Tu()
	{
	var t =document.getElementsByClassName("tu");
	x++;
	if(x>=t.length)
	{
	x=0;
	}
	for(var i=0;i<t.length;i++)
	{
	t[i].style.display="none";
	}

	t[x].style.display="block";

	var d =document.getElementsByClassName("dian");
	for(var j=0;j<d.length;j++)
	{
	if(d[j].getAttribute("x")==x)
	{
	d[j].style.backgroundColor="blue";
	}
	else
	{
	d[j].style.backgroundColor="red"
	}
	}
	}