轮播跳的很快是什么问题？

来源：6-2 作业题

慕神7335987

2018-07-07 17:10:55

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Java作业</title>
<style>
*{
	margin:0;
	padding:0;
}

.title{
	width:1200px;
	height:80px;
	cursor:pointer;
	margin:0 auto;
}

.title .nav{
	float:left;
	width:300px;
	line-height: 80px;
	text-align:center;
	color:#666;
	font-size:18px;
}

.clear{
	clear:both;
}

.main{
	width:1200px;
	height:460px;
	margin:0 auto;
	overflow: hidden;
}

.main .banner{
	width:1200px;
	height:460px;
	float:left;
	display: none;
}

.main .slide1{
	background:url("../img/1.jpg") no-repeat;
}

.main .slide2{
	background:url("../img/3.jpg") no-repeat;
}

.main .slide3{
	background:url("../img/4.jpg") no-repeat;
}

.main .slide4{
	background:url("../img/5.jpg") no-repeat;
}
</style>
</head>
<body>
<div class="top" id="top">
<!-- 标题栏 -->
<div class="title">
<div class="nav">首页</div>
<div class="nav">点击看看</div>
<div class="nav">会自动的</div>
<div class="nav">我的网站</div>
<div class="clear"></div>
</div>
<!-- banner图 -->
<div class="main" id="main">
<a href="#"><div class="banner slide1"></div></a>
<a href="#"><div class="banner slide2"></div></a>
<a href="#"><div class="banner slide3"></div></a>
<a href="#"><div class="banner slide4"></div></a>

</div>
</div>
<script type="text/javascript">

var top=document.getElementById("top"),
	banner=document.getElementById("main").getElementsByTagName("div"),
	timer=null,
	index=0,
	len=banner.length;

	
function start(){
	top.onmouseover=function(){
			
	}
	top.onmouseout=function(){
		timer=setInterval(function(){
			index++;
			if(index>=len){index=0;}
			for(var i=0;i<len;i++){
				banner[i].style.display="none";
			}
			banner[index].style.display="block";
		},3000);
		
	}
}

start();
</script>
</body>
</html>

写回答

1回答