轮播插件unsilder 源码解析(一)—源码解析

jq扩展内容

$.fn.unslider = function(opts) {
return this.each(function(index,elem) {
var $this = $(elem);//表示的是包裹ul的元素
var unslider = $(elem).data('unslider');//给这个元素存储些数据
if(unslider instanceof $.Unslider) {//当存在这个插件时不往下执行
return;
}
// Allow usage of .unslider('function_name')
// as well as using .data('unslider') to access the
// main Unslider object
if(typeof opts === 'string' && $this.data('unslider')) {//$this.data('unslider')首先执行的时候都为空，存在时为 $.Unslider 所以我觉得
opts = opts.split(':');//这段代码是不可能执行的，属于无用的
var call = $this.data('unslider')[opts[0]];//这两个配置的组成最终会指向一个函数
// Do we have arguments to pass to the string-function?
if($.isFunction(call)) {
return call.apply($this, opts[1] ? opts[1].split(',') : null);
}
}
return $this.data('unslider', new $.Unslider($this, opts));//注意这一行就是配置指向的最终函数
});
};

由上面的分析可得找到$.Unslider

$.Unslider = function(context, options) {
//.....
return self.init(options);
}

接下来分析self.init

self.init = function(options) {
//options设置
self.options = $.extend({}, self.defaults, options);
// 给div下的第一个ul添加class="unslider-wrap"
self.$container = self.$context.find(self.options.selectors.container).addClass(self.prefix + 'wrap');
//表示轮播的li
self.$slides = self.$container.children(self.options.selectors.slides);
self.setup();
$.each(['nav', 'arrows', 'keys', 'infinite'], function(index, module) {
self.options[module] && self['init' + $._ucfirst(module)]();
//执行self['initNav'],self['initArrows'],self['initKeys'],self['initInfinite']
});
if(jQuery.event.special.swipe && self.options.swipe) {
self.initSwipe();
}
self.options.autoplay && self.start();
self.calculateSlides();
self.$context.trigger(self._ + '.ready');
return self.animate(self.options.index || self.current, 'init');
};
}

接下来深入分析self.setup()，self[‘initNav’],self[‘initArrows’]，self.start();self.$context.trigger(self._ + ‘.ready’);self.calculateSlides();self.animate(self.options.index || self.current, ‘init’)

/*
self.setup()
*/
self.setup = function() {
// 添加class .banner 添加 unslider-horizontal》》使用
self.$context.addClass(self.prefix + self.options.animation).wrap('');
//.unslider
self.$parent = self.$context.parent('.' + self._);
// .banner style的 position
var position = self.$context.css('position');
if(position === 'static') {
self.$context.css('position', 'relative');
}
//.banner style="overflow:hidden"
self.$context.css('overflow', 'hidden');
};
/*
$._ucfirst
self['initNav'],self['initArrows'],self['initNav'],self['initNav']
*/
$._ucfirst = function(str) {
//把这些str的首字母变为大写字母
return (str + '').toLowerCase().replace(/^./, function(match) {
// And uppercase it. Simples.
return match.toUpperCase();
});
};

self.initArrows = function() {
if(self.options.arrows === true) {
self.options.arrows = self.defaults.arrows;
}
// 把控制上下的arrows放到self.$arrows
$.each(self.options.arrows, function(key, val) {
// Add our arrow HTML and bind it
self.$arrows.push($(val).insertAfter(self.$context).on('click' + self.eventSuffix, self[key]));
});
};
self.initKeys = function() {
if(self.options.keys === true) {
self.options.keys = self.defaults.keys;
}
//按键时触发,
$(document).on('keyup' + self.eventSuffix, function(e) {
$.each(self.options.keys, function(key, val) {
if(e.which === val) {
//self['prev'],self['next']
$.isFunction(self[key]) && self[key].call(self);
}
});
});
};
self.initInfinite = function() {
var pos = ['first', 'last'];
$.each(pos, function(index, item) {
self.$slides.push.apply(
self.$slides,
self.$slides.filter(':not(".' + self._ + '-clone")')[item]()
.clone().addClass(self._ + '-clone')
['insert' + (index === 0 ? 'After' : 'Before')](
self.$slides[pos[~~!index]]()
)
);
});
};

/*
self.start
*/
self.start = function() {
self.interval = setTimeout(function() {
//定时器自动播放，下一页
self.next();
}, self.options.delay);
return self;
};

self.next()

self.next = function() {
var target = self.current + 1;
if(target >= self.total) {
target = 0;
}
return self.animate(target, 'next');
};

self.$context.trigger(self._ + '.ready');
self.$context.on(self._ + '.ready', function() {
alert(1111);
});

/*
self.calculateSlides
*/
self.calculateSlides = function() {
//self.$slides li
self.$slides = self.$container.children(self.options.selectors.slides);
//li的长度
self.total = self.$slides.length;
// Set the total width
if(self.options.animation !== 'fade') {
var prop = 'width';
if(self.options.animation === 'vertical') {
prop = 'height';
}
//.banner添加unslider-carousel
self.$container.css(prop, (self.total * 100) + '%').addClass(self.prefix + 'carousel');
//每一个unslider的百分比
self.$slides.css(prop, (100 / self.total) + '%');
}
};

self.animate = function(to, dir) {
//循环播放
if(to === 'first') to = 0;
if(to === 'last') to = self.total;
// Don't animate if it's not a valid index
if(isNaN(to)) {
return self;
}
if(self.options.autoplay) {
self.stop().start();
}
self.setIndex(to);
self.$context.trigger(self._ + '.change', [to, self.$slides.eq(to)]);
var fn = 'animate' + $._ucfirst(self.options.animation);
if($.isFunction(self[fn])) {
self[fn](self.current, dir);
}
return self;
};