prevA = $('
', {
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 {
//設定最後一張圖片為可顯示狀態
$(config.selector).find('img').eq(imgLength - 1).addClass(config.visibleClass);
}
/ /運行遮罩效果
$.tranzify.runTransition(config);
}
}).appendTo(config.selector),
nextA = $('
' , {
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);
最後別忘記把第一張圖片設定為顯示狀態。 //div left的偏移量
//div left的偏移量
var posLeftMarker = 0,
//div 背景position的偏移
bgHorizMarker = 0,
//遮罩層總的包裝物件
overlay = $('
', {
id: config.containerID
});
//循環，決定需要創造的片段數
for (var i = 0; i //創造片段，每個片段只包含目前顯示圖片的部分圖片
$('
', {
//設定寬度
width: config.transitionWidth,
//設定高度
height: config.transitionHeight,
css: {
//設定背景圖片，來源就是目前顯示狀態的圖片
backgroundImage: 'url(' $( '.' config.visibleClass, $(config.selector)).attr('src') ')',
//設定背景圖片大小，讓他們和外部容器高度、寬度一致。這樣無論你圖片的大小，都會和容易大小匹配
backgroundSize: $(config.selector).width() 'px ' $(config.selector).height() 'px',
//設置背景偏移
backgroundPosition: bgHorizMarker 'px 0',
//設定left值
left: posLeftMarker,
top: 0
}
}). ;//加入遮罩層容器
//重新計算偏移量
bgHorizMarker -= config.transitionWidth;
posLeftMarker = config.transitionWidth;
}
//遮罩層容器加入到頁面
overlay.insertBefore('#' config.prevID);
