脚本宝典收集整理的这篇文章主要介绍了js實例教程-jquery動畫之升級版遮罩效果的圖片走廊--帶自動運行效果，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小寶典致力於為廣大程序猿（媛）提供高品質的代碼服務，請大家多多光顧小站，小寶典在此謝過。

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

代碼如下:

//顯示函數
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秒鐘時間。

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

. 代碼如下:

//鼠標移動到對象上，移出循環函數；鼠標移出，添加循環函數
$(config.selector).hover(function () {
　　clearInterval(config.interval);
}, function () {
　　config.interval = setInterval(showNext, (config.multi * 150) + 3000);
});　　

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

. 代碼如下:

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

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

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

. 代碼如下:

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

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

覺得可用，就經常來吧！Javascript技巧 腳本寶典 歡迎評論哦！ js技巧，巧奪天工，精雕玉琢。小寶典獻醜了！

脚本宝典总结

以上是脚本宝典为你收集整理的js實例教程-jquery動畫之升級版遮罩效果的圖片走廊--帶自動運行效果全部内容，希望文章能够帮你解决js實例教程-jquery動畫之升級版遮罩效果的圖片走廊--帶自動運行效果所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。