}
/**
* Set initial z-indexes & get current project
*/
Slider.prototype.init = function () {
this.dom.project.css('z-index', 10);
this.dom.current = $(this.dom.project[this.current]);
this.dom.next = $(this.dom.project[this.current + 1]);
this.dom.current.css('z-index', 30);
this.dom.next.css('z-index', 20);
};
监听箭头的点击事件，如果幻灯片现在没有处于动画过程中，检测点击的是上一张还是下一张箭头。如果点击了下一张箭头，更改相关变量的值并开始渐变动画。
/**
* Initialize events
*/
Slider.prototype.events = function () {
var self = this;
this.dom.arrow.on('click', function () {
if (self.working)
return;
self.processBtn($(this));
});
};
Slider.prototype.processBtn = function (btn) {
if (this.isAuto) {
this.isAuto = false;
clearInterval(this.auto);
}
if (btn.hasClass('next'))
this.updateNext();
if (btn.hasClass('previous'))
this.updatePrevious();
};
/**
* Update next global index
*/
Slider.prototype.updateNext = function () {
this.next = (this.current + 1) % this.length;
this.process();
};
/**
* Update next global index
*/
Slider.prototype.updatePrevious = function () {
this.next--;
if (this.next < 0)
this.next = this.length - 1;
this.process();
};这个函数是这个demo的核心函数，当我们设置当前播放的这张幻灯片的class为hide时，动画一旦结束。将上一张幻灯片的z-index减小，增加当前幻灯片的z-index值，并移除上一张幻灯片的hide class。
/**
* Process, calculate and switch between slides
*/
Slider.prototype.process = function () {
var self = this;
this.working = true;
this.dom.next = $(this.dom.project[this.next]);
this.dom.current.css('z-index', 30);
self.dom.next.css('z-index', 20);
// Hide current
this.dom.current.addClass('hide');
setTimeout(function () {
self.dom.current.css('z-index', 10);
self.dom.next.css('z-index', 30);
self.dom.current.removeClass('hide');
self.dom.current = self.dom.next;
self.current = self.next;
self.working = false;
}, this.durations.slide);
};添加相应的class触发动画，进而将遮罩图像应用到幻灯片中。其主要思想是step animation过程中移动遮罩，以创建过渡流。
英文原文：Transition Effect with CSS Masks
