這次學習的是慕課網的視頻教程Tab選項卡切換效果，視頻教的是Tab選項卡切換效果，作業(yè)寫的是焦點圖輪播效果，這兩者基本原理是一樣的。
實現(xiàn)效果描述：隨著鼠標滑過相對應標簽，對應的內容也進行切換，鼠標移開后，內容會進行自動切換展示。
首先寫html，把展示內容用列表標簽進行裝載，圖片和相對應的文字分別裝在列表中，寫好基本的CSS樣式。

  <div class="wrap" id='wrap'>
    <ul id="pic">
      <li>![](images/54111cd9000174cd04900170.jpg)</li>
      <li>![](images/54111dac000118af04900170.jpg)</li>
      <li>![](images/54111d9c0001998204900170.jpg)</li>
      <li>![](images/54111d8a0001f41704900170.jpg)</li>
      <li>![](images/54111d7d00018ba604900170.jpg)</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標簽還是焦點圖輪播實現(xiàn)原理就是先設置活動類樣式和普通類樣式，然后編寫事件函數(shù)，當事件發(fā)生時對元素使用活動類樣式，否則就使用普通類樣式，在這個焦點圖例子里，圖片的切換使用了直接用腳本添加樣式的方式進行設置，而文字的切換使用腳本調動樣式表的方式進行設置，具體例子為：

// 對元素添加類達到控制顯示
lilist[i].className="";
lilist[i].className = "on";
//直接對元素的樣式屬性display進行設置控制顯示
liimg[i].style.display="none";
liimg[i].style.display = "block";

整個切換函數(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; //將當前索引值傳遞給全局索引
    }

在切換過程中的重點是索引的關聯(lián)和傳遞，圖片列表中的項目和文字列表中的項目是一一按順序對應的。
手動切換效果達到后，開始進行自動切換的編寫，主要是用到setInterval()函數(shù)，先自定義一個播放函數(shù)，然后用setInterval()函數(shù)每隔2秒運行，并且當列表歷遍完后會重頭開始歷遍。

function autoplay(){ 
    index++;       
    if(index>=lilist.length){
        index=0;
        }
    change(index);
    }
timer = setInterval(autoplay,2000)

接著實現(xiàn)當鼠標滑過整個內容時停止自動播放，鼠標離開整個容器時繼續(xù)播放下一張，這里重點是在上面的播放函數(shù)中一開始就讓全局索引數(shù)自加1，另外還要在切換函數(shù)最后將當前切換的索引值傳遞給全局索引，這樣每次運行播放函數(shù)時就會從下一張開始。

divwrap.onmouseover = function(){
    clearInterval(timer);
    }
divwrap.onmouseout = function(){
    timer = setInterval(autoplay,2000)
    }

至此一個簡單的焦點圖輪播效果就寫完了，另外還可以對其添加其它擴展比如鼠標點擊才切換或者添加切換動畫，可以多種組合靈活使用。