jquery动画3.创建一个带遮罩效果的图片走廊

var imgLength = $(config.selector).find(‘img’).length,

接下来定义‘上一条’和‘下一条’导航，并添加到selector对象上。

prevA = $(‘<a></a>’, {
id: config.prevID,
href: ‘#’,
html: ‘«’,
click: function (e) {
e.preventDefault();
//隐藏导航
$(config.selector).find(‘a’).css(‘display’, ‘none’);
//创建遮罩
$.tranzify.createOverlay(config);
//获取当前显示状态的图片
var currImg = $(‘.’ + config.visibleClass, $(config.selector));
//当前图片不是第一张图片
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);
}
//运行遮罩效果
$.tranzify.runTransition(config);
}
}).appendTo(config.selector),
nextA = $(‘<a></a>’, {
id: config.nextID,
href: ‘#’,
html: ‘»’,
click: function (e) {
e.preventDefault();
//隐藏导航
$(config.selector).find(‘a’).css(‘display’, ‘none’);
//创建遮罩
$.tranzify.createOverlay(config);
//获取当前显示状态的图片
var currImg = $(‘.’ + config.visibleClass, $(config.selector));
//当前图片不是最后一张图片
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);
}
}).appendTo(config.selector);

最后别忘记把第一张图片设置为显示状态。

$(config.selector).find(‘img’).eq(0).addClass(config.visibleClass);

　　下面介绍创建遮罩层的代码。主要思路是：创建一组div，div的背景就是当前显示的图片，通过设置各个div css的left值，背景的backgroundPosition值，使这组div组成一个完整的图片效果。还是看代码吧，一看就一目了然了。

//div left的偏移量
var posLeftMarker = 0,
//div 背景position的偏移量
bgHorizMarker = 0,
//遮罩层总的包装对象
overlay = $(‘<div></div>’, {
id: config.containerID
});
//循环，确定需要创造的片段数
for (var i = 0; i < config.multi; i++) {