jquery中$.fn和图片滚动效果实现的必备知识总结

前言

图片滚动效果相信对大家来说都不陌生，烂大街的效果图如下所示，js实现代码很短，不过如果想做的话，必须掌握jquery、IIFE、setInterval等基础以及$.fn用法：

jquery中$.fn用法

$.fn是jquery的命名空间,如果对jquery源码有过学习，就不难发现源码中有如下代码：

jquery.fn=jquery.prototype={
 init:function(selector,context){
 /*
 *code
 */
 }
}

所以说jquery.fn也就是jquery.prototype的简写。我们的源码调用的构造函数jquery（）实例实际是jquery.fn.init（）的实例。

代码如下：

jQuery = function( selector, context ) {
 //jqeruy内部使用new创建返回另一个构造函数实力是为了省去调用jquery时前面的new，并在后面定义了别名$;
 //构造函数jquery()调用的是构造函数jQuery.fn.init()的实例
 return new jQuery.fn.init( selector, context );
},/*code*/

之后后续代码有执行了jquery.fn.init.prototype=jquery.fn，用构造函数jquery的原型对象覆盖jquery.fn.init()的原型对象，使得jquery.fn.init实例也能访问到jquery()的原型方法和属性。

开发插件的方法：用$.fn扩展jquery生成新的方法。

      1、可以使用jquery.extend(object)扩展jquery类本身，为类添加新的方法。

      2、用jquery.fn.extend(object)给jquery对象添加方法。

狼蚁网站SEO优化用jquery.extend(object)扩展jquery类,添加类方法：

$.extent({ 
 add: function(a,b){
 return a+b;
 }
})

以后就可以直接使用$.add(1,2);//3

狼蚁网站SEO优化用jquery.fn.extend(object)对jquery.prototype扩展一个方法。

$.fn.extend({
 [函数名]：fucntion(){
 /*code*/
 }
});

以后可以直接使用$(“div”).函数名()。

使用jquery中的$.fn封装一个图片滚动插件

这是一个使用到烂大街的一个插件了，不用说也知道是什么。不过具体是怎么实现的，继续往下看。这个插件最主要的部分也就是js的实现，html和css很简单，不赘述。如果狼蚁网站SEO优化一些知识点已经熟悉，可以选择性跳过。

setInterval()

setInterval()可以按指定时间不停的调用函数，直到调用clearInterval或者关闭窗口。

setInterval(fucntion(){/*code*