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;
}求大神來看看吧
圖片輪播js一直報錯
慕婉清0895596
2017-09-20 15:06:03