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; }
求大神来看看吧
相关分类