這次學(xué)習(xí)的是慕課網(wǎng)的視頻教程Tab選項(xiàng)卡切換效果，視頻教的是Tab選項(xiàng)卡切換效果，作業(yè)寫的是焦點(diǎn)圖輪播效果，這兩者基本原理是一樣的。
實(shí)現(xiàn)效果描述：隨著鼠標(biāo)滑過相對(duì)應(yīng)標(biāo)簽，對(duì)應(yīng)的內(nèi)容也進(jìn)行切換，鼠標(biāo)移開后，內(nèi)容會(huì)進(jìn)行自動(dòng)切換展示。
首先寫html，把展示內(nèi)容用列表標(biāo)簽進(jìn)行裝載，圖片和相對(duì)應(yīng)的文字分別裝在列表中，寫好基本的CSS樣式。
<div class="wrap" id='wrap'>
<ul id="pic">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ol id="list">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
無論是TAB標(biāo)簽還是焦點(diǎn)圖輪播實(shí)現(xiàn)原理就是先設(shè)置活動(dòng)類樣式和普通類樣式，然后編寫事件函數(shù)，當(dāng)事件發(fā)生時(shí)對(duì)元素使用活動(dòng)類樣式，否則就使用普通類樣式，在這個(gè)焦點(diǎn)圖例子里，圖片的切換使用了直接用腳本添加樣式的方式進(jìn)行設(shè)置，而文字的切換使用腳本調(diào)動(dòng)樣式表的方式進(jìn)行設(shè)置，具體例子為：
// 對(duì)元素添加類達(dá)到控制顯示
lilist[i].className="";
lilist[i].className = "on";
//直接對(duì)元素的樣式屬性display進(jìn)行設(shè)置控制顯示
liimg[i].style.display="none";
liimg[i].style.display = "block";
整個(gè)切換函數(shù)的原理是把除了目標(biāo)之外的其它同類隱藏，然后單獨(dú)對(duì)目標(biāo)進(jìn)行設(shè)置使之顯示：
function change(crindex){
for(var i=0;i<lilist.length;i++){
lilist[i].className="";
liimg[i].style.display="none";
}
lilist[crindex].className = "on";
liimg[crindex].style.display = "block";
index = crindex; //將當(dāng)前索引值傳遞給全局索引
}
在切換過程中的重點(diǎn)是索引的關(guān)聯(lián)和傳遞，圖片列表中的項(xiàng)目和文字列表中的項(xiàng)目是一一按順序?qū)?yīng)的。
手動(dòng)切換效果達(dá)到后，開始進(jìn)行自動(dòng)切換的編寫，主要是用到setInterval()函數(shù)，先自定義一個(gè)播放函數(shù)，然后用setInterval()函數(shù)每隔2秒運(yùn)行，并且當(dāng)列表歷遍完后會(huì)重頭開始?xì)v遍。
function autoplay(){
index++;
if(index>=lilist.length){
index=0;
}
change(index);
}
timer = setInterval(autoplay,2000)
接著實(shí)現(xiàn)當(dāng)鼠標(biāo)滑過整個(gè)內(nèi)容時(shí)停止自動(dòng)播放，鼠標(biāo)離開整個(gè)容器時(shí)繼續(xù)播放下一張，這里重點(diǎn)是在上面的播放函數(shù)中一開始就讓全局索引數(shù)自加1，另外還要在切換函數(shù)最后將當(dāng)前切換的索引值傳遞給全局索引，這樣每次運(yùn)行播放函數(shù)時(shí)就會(huì)從下一張開始。
divwrap.onmouseover = function(){
clearInterval(timer);
}
divwrap.onmouseout = function(){
timer = setInterval(autoplay,2000)
}
至此一個(gè)簡(jiǎn)單的焦點(diǎn)圖輪播效果就寫完了，另外還可以對(duì)其添加其它擴(kuò)展比如鼠標(biāo)點(diǎn)擊才切換或者添加切換動(dòng)畫，可以多種組合靈活使用。
