jquery動畫4.升級版遮罩效果的圖片走廊--附自動運轉效果_jquery

/顯示函數function showNext(flag) {
//隱藏導覽
$(config.selector).find('a').css('display', 'none');
//建立遮罩
$.tranzify.createOverlay(config);

//取得目前顯示狀態的圖​​片
var currImg = $('.' config.visibleClass, $(config.selector));

if (flag === true) {
//目前圖片不是第一張圖片
if (currImg.prev().filter('img').length > 0) {
//將上一張圖片設定為可顯示狀態
currImg.removeClass(config.visibleClass).prev().addClass(config.visibleClass);
} else {
//設定最後圖片為可顯示狀態
currImg.removeClass(config.visibleClass);
$(config.selector).find('img').eq(imgLength - 1).addClass(config.visibleClass);
}
} else {
//目前圖片不是最後一張圖片
if (currImg.next().filter('img').length > 0) {
//將下一張圖片設定為可顯示狀態
currImg.removeClass(config.visibleClass).next().addClass(config.visibleClass);
} else {
//設定第一張圖片為可顯示狀態
currImg.removeClass(config.visibleClass);
$(config.selector).find('img').eq(0).addClass(config.visibleClass);
}
}

//運行遮罩效果
$.tranzify.runTransition(config);
}


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

config.interval setInterval(showNext, (config.multi * 150) 3000);　　


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

$(config.selector).hover(function () {
　　clearInterval(config.interval);
}, function () {
　config.inter showNext, (config.multi * 150) 3000);
});　　


這裡我們要注意的是，我們把setInterval創造的物件傳給了config.interval。這樣做事為了確保上一個步驟所建立的循環函數，刪除的循環函數和刪除的循環函數是同一個物件。很忌諱把setInterval建立的物件直接傳給沒有宣告的interval，像這樣：

這樣操作時把他傳給了window物件的interval，很容易引起程式碼衝突。例如如果別的程式碼或插件裡面，也創建了一個setInterval對象，也同樣傳給了interval（等同於window.interval），那我們插件的clearInterval就會影響到別人程式碼的正常運行，同理別人的程式碼也會影響到我們。