[聚合文章] JQuery自定义插件详解之Banner图滚动插件

前  言

JRedu

JQuery是什么相信已经不需要详细介绍了。作为时下最火的JS库之一，JQuery将其“Write Less，Do More！”的口号发挥的极致。而帮助JQuery实现“写的更少，做的更多”的重要一环就是JQuery的插件，成千上万的JQ插件帮助我们实现了几乎你所需要的所有功能，大大简化了程序猿的工作量。

但是，别人的终究是别人的，吃别人的永远长大不！那么，我们能不能自己定义一款插件呢？Of Course！当前可以！今天就让我们来一探JQuery自定义插件的神秘面纱吧！

要想制作一款属于自己的插件 ， 首先我们要了解 JQuery 自定义插件的机制 。 在 JQuery 中，我们可以通过两种常用的方式定制自己的插件：

• 通过 $.extend() 来扩展 jQuery
• 通过 $.fn 向 jQuery 添加新的方法

那么两种定制方式 ， 有什么不同呢 ？ 这就要从插件的分类说起 ……

1.1 全局插件与局部插件

JQuery 中的插件、方法可以分为两大类，全局插件和局部插件。

形如 “ $.POST() 、 $.GET() 、 $.each() ”这样的方法 / 插件 , 我们称为全局插件。这类插件的特点是，无需使用选择器选取任意节点，直接使用 ”$.” 调用方法或插件 。

而形如 ”$(‘#div1’).css()、$(‘#div1’).attr()” 这样的方放 / 插件，我们成为局部插件。这类插件的特点是，需要首先使用选择器选中一个节点，再调用方法或者插件。

那么 。 我们上述提到的两种定义插件的方法 ， 就分别对应着全局插件和布局插件 。使用 $.extend() 定义的插件，即为全局插件；使用 $.fn 定义的插件，即为局部插件。

1.2 全局插件的定义

如上所述 ， 全局插件使用 $.extend() 定义。 $.extend() 本身是 JQuery 内置的一个方法，该方法接受对象类型的参数，对象中的键就是插件名，所对应的函数就是插件的操作。

1.2.1 全局插件定义结构

全局插件声明：
$.extend({
func:function(){}  // func-->插件名
});
全局插件调用：
$.func();

1.2.2 全局插件示例

/*全局插件*/
        $.extend({
            count : num,
            sayHello : function(){ // 无参插件
                alert("hello JQuery！！");
            },
            say : function(message){ // 传参插件
                alert("你说了："+message);
            }
        });
        $.sayHello();
    $.say("hahahahaha");

1.3 局部插件的定义

与定义全局插件的 $.extend() 方法不同，定义局部插件所有的 $.fn 并不是方法，而本事是一个内置对象，那么我们在使用其定义插件的时候，就可以直接在 $.fn 上追加新的方法，这个方法，就是我们所定义的局部插件。

1.3.1 局部插件定义结构

局部插件声明：
$.fn.func = function(){}
局部插件调用：
$("选择器").func();

1.3.2 局部插件示例

$.fn.setFont = function(obj){
    var defaults = {// 设置默认值
        "font-size":"12px",
        "font-weight":"normal",
        "font-family":"宋体"
        }
    // 将默认值与传入的obj比对。 并返回一个新对象。
    // 如果obj里面有的属性，则使用obj的属性。
    // 如果obj没有声明的属性则使用默认值里面的属性
    var newObj = $.extend(defaults,obj);

        // 在$.fn声明的插件函数中，可以使用this代指调用这个插件的对象节点。
    // 而且，this是一个JQuery对象
    return this.css(newObj);
    
    // 将调用当前函数的对象(this)返回，可以保证JQuery的链式调用语法
    //return this;
};

$("div").setFont({
    //"font-size":"48px",
    //"font-weight":"bold",
    //"font-family":"微软雅黑",
    //"color":"red",
}).css("text-align","center");

1.3.3 局部插件 定义 详解

大家一定看到了 ，局部插件中出现了很多大家不太熟悉的写法，我们一起来解释一下：

① 插件的方法参数，应该是对象类型

我们已经用过很多插件了，由于插件需要给使用者提供接口设置非常多的属性和回调，我们往往采用的是给插件传入一个对象类型的参数，将所有需要配置项封装在对象中。

② 可以给插件的参数属性，设置默认值

插件提供的属性设置越多，表示这个插件越灵活、功能越强大，但是如果要求用户把几十个上百个属性全部设置，这就过分了。所以我们需要给绝大部分属性提供一套默认值。方法就是在对象中声明一个defaults 对象 ， 包含用户需要传入参数的所有默认值 。

然后使用这一行代码：

var newObj = $.extend(defaults,obj);

系统会自动比对defaults 对象 与用户传入的obj 对象 ， 如果 obj 对象有设置的属性则使用 obj 的属性 ， 如果用户没有传入设置 ， 则使用 defaults 对象的默认值 。

③ 插件函数内部的 this ，代指调用插件的选择器节点。是一个 JQuey 对象。

因为局部插件需要先选中节点，在使用节点调用插件，那么当我们需要在插件中修改调用插件的节点时，可以使用 this 代指调用这个插件的节点。

注意 ！！！ 这个 this 是一个 JQuery 对象 ， 只能使用 JQuery 相关方法 。

④ 在插件的最后 return  this 保证 JQuery 的链式语法

我们都知道 JQuery 是一种链式语发，可以连续调用多个方法。因为绝大部分 JQuery 内置方法的返回值，都是调用这个方法的对象本身。

那么 ， 如果我们的插件没有返回值 ， 就打断了 JQuery 的链式语法 ， 在第 ③条中我们提到，插件中的 this 就是调用这个插件的对象，那么在插件的最后 return this， 就可以保证 JQuery 的链式语发的有效性 。

上面呢，我们学习了如何使用 JQuery 自定义一个插件。那接下来，我们来做一个几乎每个网站都用得到的功能。自定义一个 Banner 图滚动插件！

2.1 插件的基本功能

首先 ， 我们来了解一下这个插件的基本功能 ， 效果图如下 ：

从效果图可以看出 ， 我们的 Banner 滚动插件可以包含多张 Banner 图片 ， 并且可以实现图片的自动循环滚动 ；同时下方有对应图片张数的指示符，鼠标指到对应的指示符上面，可以直接将图片定位到指定位置。

2.2 插件的实现思路

了解了插件的基本功能后 ， 我们来 探讨 一下插件的实现思路 。 在这款插件中，我们给用户提供了如下设置属性的接口。

插件支持设置的属性接口

images : 接受数组类型，数组的每个值应为对象。对象具有属性： src-> 图片的路径 title-> 图片指上后的文字    href-> 点击图片跳转的页面

scrollTime : 每张图片的停留时间，单位毫秒。 2000

bannerHeight : Banner 图的高度 .  500px

iconColor : 提示图标的颜色。默认 white

iconHoverColor : 提示图标指上之后的颜色。  默认 orange

iconPosition : 提示图标的位置，可选值 left/center/right 。 默认 center

而我们的插件名称为 jquery.scrollBanner.js， 用户只需要引入我们的插件文件 ， 并且选中一个 div 节点 ， 调用插件方法 ， 传入设置参数即可生成 banner 图滚动插件 。

用户使用插件代码详解 ：

使用起来是不是非常简单 ！！但是，每一个使用简单的插件背后，都有 N 多行苦逼的 JS 源码！ ~~o(>_<)o ~~ 接下来我们来看一下插件的源码实现吧 ！

2.3 插件的详细代码实现

其实 Banner 图滚动插件的实现思路并不难，主要分为这样几步：

   2.3.1 搭建插件框架 并设置默认参数

第一步 ， 我们应该先取到用户传入的参数 ， 并声明一个默认对象 ， 借助 $.extend 比对默认对象与用户传入的对象 ， 确定最后的参数 。

!function($){
    $.fn.scrollBanner = function(obj){
        // 声明各个属性的默认值
        var defaults = {
            images : [],
            scrollTime : 2000,
            bannerHeight : "500px",
            iconColor : "white",
            iconHoverColor : "orange",
            iconPosition : "center"
        }
        // 将默认值与传入的对象比对，如果传入的对象有未赋值属性，则使用默认对象的属性
        obj = $.extend(defaults,obj);
    }
}(jQuery);

   2.3. 2   利用取到的对象组装 DOM 结构

由于我们调用插件时 ， 只需要用户选中一个 Div 即可 ， 那么 div 中的所有结构均需要我们使用 JQuery 操作 DOM 书写 。详细代码：

// 组件DOM布局
        $("body").css({"padding":"0px","margin" : "0px"});
        this.empty().append("<div class='scrollBanner-banner'></div>");
        $.each(obj.images,function(index,item){
            $(".scrollBanner-banner").append("<div class='scrollBanner-bannerInner'><a href='"+item.href+"' target='_black'><img src='"+item.src+"' title='"+item.title+"' /></a></div>");
        });
        $(".scrollBanner-banner").append("<div class='scrollBanner-bannerInner'><a href='"+obj.images[0].href+"' target='_black'><img src='"+obj.images[0].src+"' title='"+obj.images[0].title+"' /></a></div>");
        
        this.append("<div class='scrollBanner-icons'></div>");
        $.each(obj.images,function(index,item){
            // data-* 属性是H5允许用户自行在HTML标签上保存数据的属性。
            // 保存在data-*中的数据，可以使用JS读取调用。
            $(".scrollBanner-icons").append("<span class='scrollBanner-icon' data-index='"+index+"'></span>");
        })

组装好的 DOM 结构如下图所示 ：

   2.3. 3   为组装好的 DOM 结构设置 CSS 样式

DOM 结构组装完毕后 ， 我们需要使用 JQuery 为这个虚拟的 DOM 结构设置 CSS 样式 ， 让其呈现为我们想要看到 Banner 图布局与样式 。

详细代码如下 ：

this.css({
            "width": "100%",
            "height": obj.bannerHeight,
            "overflow": "hidden",
            "position": "relative"
        });
        
        $(".scrollBanner-banner").css({
            "width": obj.images.length+1+"00%",
            "height": obj.bannerHeight,
            "transition": "all .5s ease"
        });
        
        $(".scrollBanner-bannerInner").css({
            "width": 100/(obj.images.length+1)+"%",
            "height": obj.bannerHeight,
            "overflow": "hidden",
            "float": "left"
        });
        
        $(".scrollBanner-bannerInner img").css({
            "width": "1920px",
            "height": obj.bannerHeight,
            "position": "relative",
            "left": "50%",
            "margin-left": "-960px",
        });
        
        $(".scrollBanner-icons").css({
            "width": 30*obj.images.length+"px",
            "height": "7px",
            "position":"absolute",
            "bottom":"40px",
            "z-index": "100",
        });
        
        switch (obj.iconPosition){
            case "left":
                $(".scrollBanner-icons").css({
                    "left":"40px",
                });
                break;
            case "right":
                $(".scrollBanner-icons").css({
                    "right":"40px",
                });
                break;
            case "center":
                $(".scrollBanner-icons").css({
                    "left":"50%",
                    "margin-left": "-"+15*obj.images.length+"px"
                });
                break;
        }
        
        $(".scrollBanner-icon").css({
            "width": "20px",
            "height": "7px",
            "background-color": obj.iconColor,
            "display": "inline-block",
            "margin": "0px 5px",
        });
        $(".scrollBanner-icon:eq(0)").css({
            "background-color":obj.iconHoverColor
        });

设置各种css

   2.3. 4   实现 Banner 图自动滚动功能

截止到 上一步 ， 我们已经将 DOM 结构组装完毕并且设置了 CSS 布局与样式 。 也就是说 ， 我们拥有了完整的 HTML 布局 。 那接下来 ， 我们就可以让 Banner 图 “滚起来”了！

详细代码如下 ：

var count = 1;
        var icons = $(".scrollBanner-icon");
        setInterval(function(){
            $(".scrollBanner-banner").css({
                "margin-left":"-"+count+"00%",
                "transition": "all .5s ease"
            });
            $(".scrollBanner-icon").css("background-color",obj.iconColor);
            $(".scrollBanner-icon:eq("+count+")").css("background-color",obj.iconHoverColor);
            
            if(count>=obj.images.length)
            $(".scrollBanner-icon:eq("+0+")").css("background-color",obj.iconHoverColor);
            
            if(count>obj.images.length){
                count = 0;
                $(".scrollBanner-banner").css({
                    "margin-left":"0px",
                    "transition": "none"
                });
            }
            count++;
        },obj.scrollTime);

实现Banner滚动功能

    2.3. 5   指示图标指上变色并切换 Banner 图到指定位置

我们的 Banner 图可以滚动之后，这个插件的功能就接近尾声啦！还剩下最后一步，我们鼠标指在下方的小图标上，可以直接让 Banner 图跳转到指定位置！

详细代码如下 ：

// 小图标指上以后变色并且切换Banner图
        $(".scrollBanner-icon").mouseover(function(){
            $(".scrollBanner-icon").css("background-color",obj.iconColor);
            // ↓ 由span触发mouseover事件，则this指向这个span。
            // ↓ 但是，这this是JS对象，必须使用$封装成JQuery对象。
            $(this).css("background-color",obj.iconHoverColor);
            
            var index = $(this).attr("data-index");
            // 将计数器count修改为index的值，让Banner滚动的定时器能够刚好滚到所指图片的下一张
            count  = index; 
            $(".scrollBanner-banner").css({
                "transition": "none",
                "margin-left": "-"+index+"00%"
            });
        });

好啦 ！ 到这里 ， 我们的全部功能就实现完毕啦 ！！ 是不是非常神奇 ！！ 我们也是拥有属于自己插件的人啦 ！

需要源码的同学可以点击下载 ： jquery.scrollBanner.js.zip

有任何问题 ， 也欢迎大家评论区留言探讨哦 ！