選項卡作為最基礎的網頁組成部分，已經難以用簡單的CSS樣式寫出相應效果。這時就需要JS（JavaScript）來達到我們想要的效果。
先如圖寫一個簡單的布局吧：
輪播的圖片選項卡
<body>
<div id="box">
<a href="javascript:;" id="left"><</a>
<a href="javascript:;" id="right">></a>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ol id="ol1">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</body>
其中，
- 兩個a標簽通過絕對定位到div的兩側，起到翻到上一頁或下一頁的功能；
- ul中采用5個li并為每一個li中準備好圖片或者別的內容；
- ol中5個li設計成5個小圓點則充當索引的功能，并添加active的class賦予被選中后變?yōu)槌壬谋贿x中樣式。
接下來就是JS代碼：
<script>
window.onload=function(){
var oBox=document.getElementById('box');
var oUl=document.getElementById('ul1');
var oOl=document.getElementById('ol1');
var oL=document.getElementById('left');
var oR=document.getElementById('right');
var aUl=oUl.getElementsByTagName('li');
var aOl=oOl.getElementsByTagName('li');
var iNow=0;
首先獲取我們所需要用上的所有元素，并設置一個初始值iNow用以充當各組變量的下標，傳遞各個操作導致變量下標變化的值。
//函數(shù)：切換顯示內容
function tab(){
for(var i=0; i<aOl.length; i++){
aUl[i].style.display='none';
aOl[i].className='';
};
aUl[iNow].style.display='block';
aOl[iNow].className='active';
};
第一個函數(shù)的作用是觸發(fā)事件后圖片內容的切換，在切換前通過for循環(huán)操作一組變量清空現(xiàn)有的所有樣式，比如小圓點被選中的變色效果及當前顯示內容的隱藏，再把所需顯示的內容與相對應的索引小圓點樣式通過下標iNow切換出來。
//函數(shù)：開啟圖片輪播
function timer(){
oBox.timer=setInterval(function(){
iNow++;
if(iNow==aOl.length){
iNow=0;
};
tab();
},3600);
}
//開啟圖片輪播，并使輪播在鼠標移入后停止，鼠標移出后開啟
timer();
oBox.onmouseover=function(){
clearInterval(oBox.timer);
};
oBox.onmouseout=function(){
timer();
};
這里設置一個定時器，通過每過一段時間，圖片所在li及小圓點的li的下標iNow自增，當iNow的值超出下標的范圍是歸零，再調用切換函數(shù)達到選項卡自動輪播的效果。
//鼠標在下方選項卡處選取對應圖片
for(var i=0; i<aOl.length; i++){
aOl[i].index=i;
aOl[i].onmouseover=function(){
iNow=this.index;
tab();
};
};
對于一組選項，理所當然的用上for循環(huán)，這里則是當鼠標懸停onmouseover到某一小圓點上時，讓圖片內容及索引效果馬上切換到當前小圓點及對應內容上，通過自定義屬性獲得當前小圓點的下標iNow，然后調用上方切換效果函數(shù)即可。
//左右按鈕使圖片前后切換
oR.onclick=function(){
iNow++;
if(iNow==aOl.length){
iNow=0;
};
tab();
};
oL.onclick=function(){
iNow--;
if(iNow<0){
iNow=aOl.length-1;
};
tab();
};
}
</script>
這個則是左右兩個按鈕翻頁的功能，與自動輪播的機制相似，通過按鈕使下標iNow的值+1或-1，再通過切換函數(shù)切換內容就行了。
這就是簡單的自動輪播選項卡了，要再做到別的動畫效果比如常用的無縫滾動則在布局及JS上又有更多的變化，下次講到運動再做細說。
