<!DOCTYPE html><html><head><meta charset="UTF-8"><title>6-2 作業(yè)</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);} /*最后出現(xiàn)的優(yōu)先級最高*/</style></head><body><div id="main"><!--菜單--><div><ul id="menu-ul"><li><a href="">首頁</a></li><li><a href="">點(diǎn)擊看看</a></li><li><a href="">會自動的</a></li><li><a href="">我的網(wǎng)站</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 是數(shù)組?timer=null;//圖片輪播function bannerPics(){var main=byId("main");main.onmouseout=function(){timer=setInterval(function(){//設(shè)置定時器index++;if(index>=len){index=0;}changeImg();},1000);};//滑過清除定時器main.onmouseover=function(){if(timer){clearInterval(timer);}};//自動在banner上自動觸發(fā)onmouseout事件main.onmouseout();//點(diǎn)擊li切換圖片，遍歷所有點(diǎn)擊，且綁定事件for(var n=0;n<len.length;n++){//給所有的li添加一個id的值，值為n,作為當(dāng)前n的索引menuUlli[n].id=n;? ? //綁定onclick事件? ? menuUlli[n].onclick=function(){? ? ?//改變index為當(dāng)前l(fā)i的索引? ? ?index=this.id;? ? ?//改變class變?yōu)閙enu-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="";}//根據(jù)index所用找到當(dāng)前div，將其進(jìn)行顯示。pics[index].style.display="block";menuUlli[index].className="menu-active";}bannerPics()//調(diào)用圖片輪播</script></body></html>
切換頁選項(xiàng)的背景顏色發(fā)生相應(yīng)的變化并且圖片也切換 這個實(shí)現(xiàn)不了，錯在哪里了？
祀未
2017-05-02 19:35:08
