<!DOCTYPE html><html><head><meta charset="UTF-8"><title>6-2 作业</title><style type="text/css">*{margin: 0;padding:0;}a:link,a:visited{text-decoration: none;/*去下划线*/color: #666;font-size: 22px;}ul{list-style: none;}body{font-family: "微软雅黑";color: #666;cursor: pointer;}.clear:after{display: block;clear: both;content: "";visibility: hidden;height: 0;}.clear{zoom:1}.main{width: 1200px;height: 500px;margin:30px auto;overflow: hidden;}.menu{width: 100%;height:40px;}.menu ul{width: 100%;height: 40px;}.menu ul li{float: left;width: 300px;}.menu-active{background-color:#ffcc00;font-weight:bold;border: transparent;border-radius: 10px;}.menu ul li a{display: inline-block;width: 100%;margin: 0 auto;text-align: center;line-height: 40px;}/*图片*/.banner{height: 460px;width: 1200px;overflow: hidden;position: relative;}.banner-slide{height: 460px;width: 1200px;background-repeat: no-repeat;position: absolute;}.slide-active{display: block;}.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);} /*最后出现的优先级最高*/</style></head><body><div id="main"><!--菜单--><div><ul id="menu-ul"><li><a href="">首页</a></li><li><a href="">点击看看</a></li><li><a href="">会自动的</a></li><li><a href="">我的网站</a></li></ul></div><!--图片轮播--><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>function byId(id){return typeof(id)==="string"?document.getElementById(id):id; //检测id类型大小,如果是字符串则取id，不是则返回id}//全局变量var index=0,banner=byId("banner"),pics=banner.getElementsByTagName("div"),len=pics.length,menuUl=byId("menu-ul"), menuUlli=menuUl.getElementsByTagName("li"),//每个li 是数组 timer=null;//图片轮播function bannerPics(){var main=byId("main");main.onmouseout=function(){timer=setInterval(function(){//设置定时器index++;if(index>=len){index=0;}changeImg();},1000);};//滑过清除定时器main.onmouseover=function(){if(timer){clearInterval(timer);}};//自动在banner上自动触发onmouseout事件main.onmouseout();//点击li切换图片，遍历所有点击，且绑定事件for(var n=0;n<len.length;n++){//给所有的li添加一个id的值，值为n,作为当前n的索引menuUlli[n].id=n; //绑定onclick事件 menuUlli[n].onclick=function(){ //改变index为当前li的索引 index=this.id; //改变class变为menu-active this.className="menu-active"; changeImg(); }}}//切换图片function changeImg(){//遍历banner下所有的div,将其隐藏.遍历ul下的li将其清除for(var i=0;i<len;i++){pics[i].style.display="none";menuUlli[i].className="";}//根据index所用找到当前div，将其进行显示。pics[index].style.display="block";menuUlli[index].className="menu-active";}bannerPics()//调用图片轮播</script></body></html>
添加回答
举报
0/150
提交
取消