<!DOCTYPE html><html><head><meta charset="utf-8"><title>作业</title><link rel="stylesheet" type="text/css" href="css/style.css"></head><body><!--页面--><div class="main" id="main"><!--导航菜单--><div class="menu" id="menu"><ul><li class="inner active"><a href="">首页</a></li><li class="inner"><a href="">点击查看</a></li><li class="inner"><a href="">会自动的</a></li><li class="inner"><a href="">我的网页</a></li></ul></div><!--banner图--><div class="banner" id="banner"><!--第一张图--><a href=""><img src="img/bg1.jpg" class="bannre-slide banner-active"></a><!--第二张图--><a href=""><img src="img/bg2.jpg" class="bannre-slide"></a><!--第三张图--><a href=""><img src="img/bg3.jpg" class="bannre-slide"></a><!--第四张图--><a href=""><img src="img/bg4.jpg" class="bannre-slide"></a></div></div><script type="text/javascript" src="js/script.js"></script></body></html>css部分：*{margin: 0;padding: 0;}li{list-style-type: none;}body{font-family: "微软雅黑";color: #14191e;}a:link,a:visited{text-decoration: none;color: #333;}/*整体页面*/.main{width: 1200px;height: 520px;margin: 20px auto;}/*导航*/.menu{width: 1200px;height: 60px;}ul{width: 1200px;height: 60px;}.inner{width: 300px;height: 60px;font-size: 20px;line-height: 60px;text-align: center;float: left;}.active{background-color:#ffcc00; }/*banner图*/.banner{width: 1200px;height: 460px;position: relative;}.bannre-slide{width: 100%;height: 100%;position: absolute;top: 0;left: 0;display: none;}.banner-active{display: block;}js部分：//封装代替getElementById()的方法function byId(id){ if(typeof(id)==="string"){ return document.getElementById(id); } else{ return id; }}//全局变量var index=0, timer=null, pits=byId("banner").getElementsByTagName("img"), dots=byId("menu").getElementsByTagName("li"), len=pits.length;function slideImg(){ var main=byId("main"); //鼠标悬停整个main区域时，清除定时器 main.onmouseover=function(){ if(timer){ clearInterval(timer); } } //鼠标离开启动定时器 main.onmouseout=function(){ timer=setInterval(function(){ index++; if(index>=len){ index=0; } changeImg(); },2000) } main.onmouseout(); //绑定点击事件 for(var d=0;d<len;d++){ dots[d].setAttribute("date-N",d); dots[d].onclick=function(){ index=this.getAttribute("date-N"); changeImg(); } }}//切换图片函数封装function changeImg(){ for(var i=0;i<len;i++){ dots[i].className="inner"; pits[i].style.display="none"; } dots[index].className="inner active"; pits[index].style.display="block"; }slideImg();
1 回答
woshi昊
TA贡献10条经验 获得超3个赞
a标签的href表示跳转，如果为空的话在点击时会刷新页面表示跳转到原页面了，刷新的时候你原来的事件也被清除了，如果a标签只是使用不进行跳转的话，这样写<a href="javascript:;">首页</a></li>，把所有的a标签的href里面写上javascript:;就可以了
添加回答
举报
0/150
提交
取消