猿问

图片轮播js一直报错

function byId(id){
	return typeof(id)==="string"?document.getElementById("id"):(id);
}
var index=0,
	pics=byId("banner").getElementsByTagName("div"),
	len=pics.length,
	timer=null,
function slideImg(){
	//鼠标离开,进行轮播
	var main=byId("main");
	main.onmouseout=function(){
		timer=setInterval(function(){
			index++;
			if(index>=len){
				index=0;
			}
			//图片切换
			changeImg();
		},3000)
	}
	main.onmouseout();
}
function changeImg(){
	//鼠标离开时,给索引添加display属性
	pics[index].style.display="block";
}

js没写完但是function slideImg(){这一行一直报错,html在下方

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>9.20</title>
<link rel="stylesheet" href="css/1.css">
</head>
<body>
<div id="main">
<!-- 轮播图 -->
<div id="banner">
<a href="">
<div class="banner-slide slide1 slide-active"></div>
</a>
<a href="">
<div class="banner-slide slide2"></div>
</a>
<a href="">
<div class="banner-slide slide3"></div>
</a>
<a href="">
<div class="banner-slide slide4"></div>
</a>
</div>
</div>
<script src="js/1.js"></script>
</body>
</html>

css在这里

*{
	padding: 0;
	margin:0;
}
ul{
	list-style: none;
}
body{
	font-family: "微软雅黑";
	font-size: 14px;
}
a{
	text-decoration:none;
}
/*轮播图*/
.banner{
	width: 1200px;
	height: 460px;
	position: absolute;
	top:50%;
	left:50%;
	margin-top: -230px;
	margin-left: -600px;
	overflow: hidden;
}
.banner-slide{
	width: 1200px;
	height:460px;
	display: none;
}
.slide1{
	background-image: url("../img/1.jpg");
}
.slide2{
	background-image: url("../img/3.jpg");
}
.slide3{
	background-image: url("../img/4.jpg");
}
.slide4{
	background-image: url("../img/5.jpg");
}
.slide-active{
	display: block;
}

求大神来看看吧

慕婉清0895596
浏览 1156回答 1
1回答
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答