快捷導(dǎo)航

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

更新時間：2012年08月24日 11:16:23 作者：

我將上一章中了插件做了個小小的升級，實現(xiàn)了自動運行效果，完整代碼大家見demo

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

 
//顯示函數(shù) 
function showNext(flag) { 
//隱藏導(dǎo)航 
$(config.selector).find('a').css('display', 'none'); 
//創(chuàng)建遮罩 
$.tranzify.createOverlay(config); 

//獲取當(dāng)前顯示狀態(tài)的圖片 
var currImg = $('.' + config.visibleClass, $(config.selector)); 

if (flag === true) { 
//當(dāng)前圖片不是第一張圖片 
if (currImg.prev().filter('img').length > 0) { 
//將上一張圖片設(shè)置為可顯示狀態(tài) 
currImg.removeClass(config.visibleClass).prev().addClass(config.visibleClass); 
} else { 
//設(shè)置最后一張圖片為可顯示狀態(tài) 
currImg.removeClass(config.visibleClass); 
$(config.selector).find('img').eq(imgLength - 1).addClass(config.visibleClass); 
} 
} else { 
//當(dāng)前圖片不是最后一張圖片 
if (currImg.next().filter('img').length > 0) { 
//將下一張圖片設(shè)置為可顯示狀態(tài) 
currImg.removeClass(config.visibleClass).next().addClass(config.visibleClass); 
} else { 
//設(shè)置第一張圖片為可顯示狀態(tài) 
currImg.removeClass(config.visibleClass); 
$(config.selector).find('img').eq(0).addClass(config.visibleClass); 
} 
} 

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

之所以要把他抽出來，是因為下面的setInterval里面也要用到它，不想有太多重復(fù)的代碼，所以又必要抽出來，這樣統(tǒng)一管理。接下來我們來看setIntervale。

復(fù)制代碼代碼如下:

 
//設(shè)置循環(huán)函數(shù) 
config.interval = setInterval(showNext, (config.multi * 150) + 3000);　　 

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

　　添加完循環(huán)函數(shù)后，我們?yōu)閟elector對象添加hover事件，當(dāng)鼠標(biāo)移動到對象上時，移出interval，鼠標(biāo)移出時添加interval。

復(fù)制代碼代碼如下:

 
//鼠標(biāo)移動到對象上，移出循環(huán)函數(shù)；鼠標(biāo)移出，添加循環(huán)函數(shù) 
$(config.selector).hover(function () { 
　　clearInterval(config.interval); 
}, function () { 
　　config.interval = setInterval(showNext, (config.multi * 150) + 3000); 
});　　 

這里我們要注意的是，我們把setInterval創(chuàng)造的對象傳給了config.interval。這樣做事為了保證上一步中創(chuàng)建的循環(huán)函數(shù)，刪除的循環(huán)函數(shù)和刪除的循環(huán)函數(shù)是同一個對象。很忌諱把setInterval創(chuàng)建的對象直接傳給沒有聲明的interval，像這樣：

復(fù)制代碼代碼如下:

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

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

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

復(fù)制代碼代碼如下:

 
//判斷是否有沒有運行完的補間動畫，存在則立即結(jié)束動畫，移出對象 
var transOverlay = $('#' + config.containerID); 
if (transOverlay) { 
　　transOverlay.stop(true, true); 
　　transOverlay.remove(); 
} 

好了，需要講解的對象都講完了，大家還是直接下demo看效果吧。
demo下載地址：jQuery.animation.tranzify_improve.js

您可能感興趣的文章: