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;
};

轮播插件unsilder 源码解析(一)---源码解析的更多相关文章

  1. 轮播插件unsilder 源码解析(一)---使用

    啰嗦几句:学习的可以直接省略,一直本着写原生的插件想法,但是前天看了吕大豹的博客觉得自己都没有正经的写个jquery插件:所以在开始写之前我会先对几个比较热门的jquery的插件进行源码分析:至于为什 ...

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

    $.fn._active = function(className) { //当前的添加class,相邻元素去除class return this.addClass(className).siblin ...

  3. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  4. Nivo Slider - 世界上最棒的 jQuery 图片轮播插件

    Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...

  5. Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  6. 自己写的一个jQuery轮播插件

    大概是四月初开始写的,中间停了有一个月吧.这是我在Github的第一个项目.项目地址:https://github.com/linzb93/jquery.slide.js. 轮播应该是最好写的插件了, ...

  7. 面板支持单个,多个元素的jQuery图片轮播插件

    一.先附上demo <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  8. slider轮播插件的多种写法

    slider轮播插件相信大家经常会用到,写法也是各种各样,大部分都是用的第三方提供的组件使用,如果想基于自己的业务特点封装个组件供自己使用的话就要自己封装组件了,网上看了大部分写法都是通过js控制do ...

  9. 多预览小图焦点轮播插件lrtk

    多预览小图焦点轮播插件lrtk // JavaScript Document $(document).ready(function(){ //$('#select_btn li:first').css ...

随机推荐

  1. 批处理bat 命令

    1.批处理常用符号: - echo 打开回显或关闭请求回显功能,或显示消息.如果没有任何参数,echo 命令将显示当前回显设置 语法:@echo [{ on|off }]  echo{"显示 ...

  2. Extjs5 tabs实例

    <%@ page language= "java" contentType ="text/html; charset=UTF-8"     pageEnc ...

  3. mysql数据类型

    一.数值类型 Mysql支持所有标准SQL中的数值类型,其中包括严格数据类型(INTEGER,SMALLINT,DECIMAL,NUMBERIC),以及近似数值数据类型(FLOAT,REAL,DOUB ...

  4. getopt,getoptlong学习

         getopt和getoptlong被用来解析命令行参数.   一.getopt #include <unistd.h> extern char *optarg; extern i ...

  5. Prometheus 系统监控方案 二 安装与配置

    下载Prometheus 下载最新安装包,本文说的都是在Linux x64下面内容,其它平台没尝试过,请选择合适的下载. Prometheus 主程序,主要是负责存储.抓取.聚合.查询方面. Aler ...

  6. android 闪屏还是会出现黑屏问题

    public class SplashActivity extends Activity{ @Override protected void onCreate(Bundle savedInstance ...

  7. [django]手动数据库备份

    基本原理是按钮点击后,系统查询出数据表中信息,然后在网页中导出相关表格! 若有自动数据库备份的兄弟,指点一下! 模板代码: <a href="{% url 'work_backup' ...

  8. Android Studio导入Project、Module的正确方法

    Gradle Project项目.Module模块导入 最近看到网上很多人在抱怨,Android Studio很难导入github上下载下来的一些项目,主要包括: 1.导入就在下载Gradle2.根本 ...

  9. BZOJ 3555: [Ctsc2014]企鹅QQ [字符串哈希]【学习笔记】

    3555: [Ctsc2014]企鹅QQ Time Limit: 20 Sec  Memory Limit: 256 MBSubmit: 2046  Solved: 749[Submit][Statu ...

  10. Java开发的几个注意点

    原文出处: 后端技术杂谈 1. 将一些需要变动的配置写在属性文件中 比如,没有把一些需要并发执行时使用的线程数设置成可在属性文件中配置.那么你的程序无论在DEV环境中,还是TEST环境中,都可以顺畅无 ...