jquery動畫 -- 4.更新版遮罩效果的圖檔走廊--帶自動運作效果

　　我将上一章中了插件做了個小小的更新，實作了自動運作效果，完整代碼大家見demo。

 　　主要的變化點有：把‘下一條’、‘上一條’的click事件抽象到一個函數showNext中。添加setInterval，添加selector元素的hover事件。好了，我們一個個的看。

showNext函數：

　　之是以要把他抽出來，是因為下面的setInterval裡面也要用到它，不想有太多重複的代碼，是以又必要抽出來，這樣統一管理。接下來我們來看setIntervale。

　　其實就是添加一個循環函數，每個多少秒，運作一次showNext函數，顯示下一張圖檔。這裡要注意的一點是間隔時間的計算。還記得上一章中runTransition函數中給animate對象設定的間隔時間嗎？橫向顯示設定為slow，也就是600毫秒。每一幀豎向顯示設定的時間是150毫秒，一共有config.multi幀。(config.multi * 150)肯定大于600，是以我們這裡就取(config.multi * 150)作為時間标準。為了防止動畫剛運作完，就接着顯示下一張圖檔，我們加了額外的3秒鐘時間。

　　添加完循環函數後，我們為selector對象添加hover事件，當滑鼠移動到對象上時，移出interval，滑鼠移出時添加interval。

　　這裡我們要注意的是，我們把setInterval創造的對象傳給了config.interval。這樣做事為了保證上一步中建立的循環函數，删除的循環函數和删除的循環函數是同一個對象。很忌諱把setInterval建立的對象直接傳給沒有聲明的interval，像這樣：

　　這樣操作時把他傳給了window對象的interval，很容易引起代碼沖突。比如如果别的代碼或者插件裡面，也建立了一個setInterval對象，也同樣傳給了interval（等同于window.interval），那我們插件的clearInterval就會影響到别人代碼的正常運作，同理别人的代碼也會影響到我們。

　　最後為了代碼的健壯性，我們給createOverlay添加了下面的代碼，保證同時隻有一個遮罩層：

　　好了，需要講解的對象都講完了，大家還是直接下demo看效果吧。

<a href="http://www.vancl.com/?source=kbh1983&amp;sourcesuninfo=ad-3090-1-52-0-1" target="_blank"></a>