jquery動(dòng)畫(huà)4.升級(jí)版遮罩效果的圖片走廊--帶自動(dòng)運(yùn)行效果
2024-05-06 14:21:23
供稿：網(wǎng)友
主要的變化點(diǎn)有：把‘下一條'、‘上一條'的click事件抽象到一個(gè)函數(shù)showNext中。添加setInterval，添加selector元素的hover事件。好了，我們一個(gè)個(gè)的看。
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);
}
}
//運(yùn)行遮罩效果
$.tranzify.runTransition(config);
}
之所以要把他抽出來(lái)，是因?yàn)橄旅娴膕etInterval里面也要用到它，不想有太多重復(fù)的代碼，所以又必要抽出來(lái)，這樣統(tǒng)一管理。接下來(lái)我們來(lái)看setIntervale。
代碼如下:
//設(shè)置循環(huán)函數(shù)
config.interval = setInterval(showNext, (config.multi * 150) + 3000);
其實(shí)就是添加一個(gè)循環(huán)函數(shù)，每個(gè)多少秒，運(yùn)行一次showNext函數(shù)，顯示下一張圖片。這里要注意的一點(diǎn)是間隔時(shí)間的計(jì)算。還記得上一章中runTransition函數(shù)中給animate對(duì)象設(shè)置的間隔時(shí)間嗎？橫向顯示設(shè)置為slow，也就是600毫秒。每一幀豎向顯示設(shè)置的時(shí)間是150毫秒，一共有config.multi幀。(config.multi * 150)肯定大于600，所以我們這里就取(config.multi * 150)作為時(shí)間標(biāo)準(zhǔn)。為了防止動(dòng)畫(huà)剛運(yùn)行完，就接著顯示下一張圖片，我們加了額外的3秒鐘時(shí)間。
添加完循環(huán)函數(shù)后，我們?yōu)閟elector對(duì)象添加hover事件，當(dāng)鼠標(biāo)移動(dòng)到對(duì)象上時(shí)，移出interval，鼠標(biāo)移出時(shí)添加interval。
代碼如下:
//鼠標(biāo)移動(dòng)到對(duì)象上，移出循環(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)造的對(duì)象傳給了config.interval。這樣做事為了保證上一步中創(chuàng)建的循環(huán)函數(shù)，刪除的循環(huán)函數(shù)和刪除的循環(huán)函數(shù)是同一個(gè)對(duì)象。很忌諱把setInterval創(chuàng)建的對(duì)象直接傳給沒(méi)有聲明的interval，像這樣：
