轮播插件unsilder 源码解析(二)

$.fn._active = function(className) {
//当前的添加class，相邻元素去除class
return this.addClass(className).siblings().removeClass(className);
};
self.stop = function() {
//轮播结束，清除定时器
clearTimeout(self.interval);
return self;
};
self.destroyArrows = function() {
//去除arrow
$.each(self.$arrows, function(i, $arrow) {
$arrow.remove();
});
};
// Remove any swipe events and reset the position
self.destroySwipe = function() {
//解除'movestart move moveend'的绑定
self.$container.off('movestart move moveend');
};

//对于self.current的处理，得到当前的的self.current，并且加上class
self.setIndex = function(to) {if(to < 0) {
to = self.total - 1;
}
self.current = Math.min(Math.max(0, to), self.total - 1);
if(self.options.nav) {
self.$nav.find('[data-slide="' + self.current + '"]')._active(self.options.activeClass);
}
self.$slides.eq(self.current)._active(self.options.activeClass);
return self;
};

animate滚动的方式

self.animateFade = function(to) {
self.animateHeight(to);
var $active = self.$slides.eq(to).addClass(self.options.activeClass);
self._move($active.siblings().removeClass(self.options.activeClass), {opacity: 0});
self._move($active, {opacity: 1}, false);
};
//"animate":"horizontal";是通过改变margin-left，margin-right的值来轮播
self.animateHorizontal = function(to) {
var prop = 'left';
if(self.$context.attr('dir') === 'rtl') {
prop = 'right';
}
if(self.options.infinite) {
// So then we need to hide the first slide
self.$container.css('margin-' + prop, '-100%');
}
return self.slide(prop, to);
};
//"animation":"vertical";是通过改变top的值来轮播
self.animateVertical = function(to) {
self.options.animateHeight = true;
//如果self.options.infinite为真
if(self.options.infinite) {
//到最后一页时不回滚
self.$container.css('margin-top', -self.$slides.outerHeight());
}
return self.slide('top', to);
};

self.animateHeight = function(to) {
if (self.options.animateHeight) {
self._move(self.$context, {height: self.$slides.eq(to).outerHeight()}, false);
}
};self._move = function($el, obj, callback, speed) {
if(callback !== false) {
callback = function() {
self.$context.trigger(self._ + '.moved');
};
}
return $el._move(obj, speed || self.options.speed, self.options.easing, callback);
};

slide

self.slide = function(prop, to) {
self.animateHeight(to);
if(self.options.infinite) {
var dummy;
// Going backwards to last slide
if(to === self.total - 1) {
// We're setting a dummy position and an actual one
 // the dummy is what the index looks like
 // (and what we'll silently update to afterwards),
 // and the actual is what makes it not go backwards
dummy = self.total - 3;
console.log(dummy);
 to = -1;
 }
// Going forwards to first slide
if(to === self.total - 2) {
dummy = 0;
 to = self.total - 2;
 }
// If it's a number we can safely set it
if(typeof dummy === 'number') {
self.setIndex(dummy);
// Listen for when the slide's finished transitioning so
 // we can silently move it into the right place and clear
 // this whole mess up.
self.$context.on(self._ + '.moved', function() {
if(self.current === dummy) {
self.$container.css(prop, -(100 * dummy) + '%').off(self._ + '.moved');
 }
 });
 }
 }
// We need to create an object to store our property in
 // since we don't know what it'll be.
var obj = {};
// Manually create it here
obj[prop] = -(100 * to) + '%';
// And animate using our newly-created object
return self._move(self.$container, obj);
};