js 實現 tab 切換
實現如下效果：
1、圖片每1秒鍾切換1次。
2、當鼠標停留在整個頁面上時，圖片不進行輪播。
3、當點擊切換頁的選項上時，出現該選項的對應圖片，而且切換頁選項的背景顏色發生相應的變化。
4、當圖片發生輪播切換時，在不點擊選項卡的前提下，相應的選項卡背景顏色也自動發生變化。
效果圖如下：
index.html文件
<!DOCTYPE html> <html> <head> <title>js導航輪播</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text/javascript" src="js/script.js"></script> </head> <body> <div class="main" id="main"> <div class="nav"> <ul id="ul"> <li id="0">首頁</li> <li id="1">點擊看看</li> <li id="2">會自動的</li> <li id="3">我的網站</li> </ul> </div> <div class="banner" id="banner"> <a href=""><img src="img/1.jpg" class="banner-slide"/></a> <a href=""><img src="img/3.jpg" class="banner-slide"/></a> <a href=""><img src="img/4.jpg" class="banner-slide"/></a> <a href=""><img src="img/5.jpg" class="banner-slide"/></a> </div> </div> </body> </html>
style.css文件
*{margin: 0;padding: 0;} /*導航菜單*/ body{font-family: "Microsoft YaHei";} .main{width:602px;height:263px;margin: 20px auto;overflow: hidden;} .nav ul{width: 600px;overflow: hidden;border: 1px solid #f3f3f3;border-bottom: #fc0;} .nav ul li{float: left;list-style: none;width: 150px;text-align: center;background-color: #fff;padding: 5px 0;border-radius: 5px;cursor: pointer;} .nav ul .active{background-color: #fc0;font-weight: bold;cursor: pointer;} /*輪播圖*/ .banner{width:602px;overflow: hidden;position: relative;} img{width: 100%;} img .banner-slide{vertical-align: bottom;position: absolute;display: none;}
script.js文件
//封裝一個代替getElementById()的方法 function $(id){ return typeof(id) === "string"?document.getElementById(id):id; } window.onload=function(){ var index = 0, timer = null, titles = $("ul").getElementsByTagName("li"), pics = $("banner").getElementsByTagName("img"), len = pics.length; //初始狀態設置 titles[0].className="active"; pics[0].style.display='block'; //封裝一個切換的tab函數 function tab(){ //鼠標滑過是清除定時器 $("main").onmouseover=function(){ if(timer) {clearInterval(timer);} } //鼠標滑出時繼續自動切換 $("main").onmouseout=function(){timer = setInterval(autoPlay,1000);} //遍歷li，點擊li時跳轉到相應頁面，並且li樣式隨之改變 for(var i=0;i<len;i++){ titles[i].id=i; titles[i].onclick=function(){ clearInterval(timer); changeOption(this.id); } $("main").onmouseout=function(){ timer = setInterval(autoPlay,1000); } } if(timer){ clearInterval(timer); timer=null; } //添加定時器，實現每隔一秒自動切換 timer = setInterval(autoPlay,1000); //封裝autoPlay自動切換函數 function autoPlay(){ index++; if(index >= len){ index = 0; } changeOption(index); } //封裝changeOption函數 function changeOption(curIndex){ for (var j=0;j<len;j++) { titles[j].className=''; pics[j].style.display='none'; } titles[curIndex].className="active"; pics[curIndex].style.display='block'; index=curIndex; } } tab(); }