JQuery自定义插件详解之Banner图滚动插件

迷南。 2022-03-30 15:42 709阅读 0赞

>  **前 言**
> 
> **JRedu**
> 
> 　JQuery是什么相信已经不需要详细介绍了。作为时下最火的JS库之一，JQuery将其“Write Less，Do More！”的口号发挥的极致。而帮助JQuery实现“写的更少，做的更多”的重要一环就是JQuery的插件，成千上万的JQ插件帮助我们实现了几乎你所需要的所有功能，大大简化了程序猿的工作量。
> 
> 　但是，别人的终究是别人的，吃别人的永远长大不！那么，我们能不能自己定义一款插件呢？Of Course！当前可以！今天就让我们来一探JQuery自定义插件的神秘面纱吧！

<table style="border:0px solid #000000;border-collapse:collapse;color:#333333;font-family:Georgia, 'Times New Roman', Times, sans-serif;font-size:14px;line-height:25px;"> 
 <tbody> 
  <tr> 
   <td style="border-style:solid;border-color:#C0C0C0;border-collapse:collapse;"><span style="font-family:'Microsoft YaHei';"><strong><span style="color:#ffffff;font-size:14pt;">一、JQuery自定义插件基础</span></strong></span></td> 
  </tr> 
 </tbody> 
</table>

要想制作一款属于自己的插件，首先我们要了解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的链式语发的有效性。

<table style="border:0px solid #000000;border-collapse:collapse;color:#333333;font-family:Georgia, 'Times New Roman', Times, sans-serif;font-size:14px;line-height:25px;"> 
 <tbody> 
  <tr> 
   <td style="border-style:solid;border-color:#C0C0C0;border-collapse:collapse;"><span style="font-family:'Microsoft YaHei';"><strong><span style="color:#ffffff;font-size:14pt;">二、自定义Banner图滚动插件</span></strong></span></td> 
  </tr> 
 </tbody> 
</table>

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

## 2.1**插件的基本功能** ##

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

![708076-20171018104318537-77152943.gif][]

从效果图可以看出，我们的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图滚动插件。

**用户使用插件代码详解****：**

**![708076-20171018104717474-2127271649.png][]**

使用起来是不是非常简单！！但是，每一个使用简单的插件背后，都有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结构如下图所示：

![708076-20171018105001927-1055992853.png][]

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

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

详细代码如下：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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图“滚起来”了！

详细代码如下：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

实现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][]

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

作者：杰瑞教育  
出处： [http://www.cnblogs.com/jerehedu/][http_www.cnblogs.com_jerehedu]  
版权声明：本文版权归烟 台 [杰瑞教育][Link 1] 科 技有限公司和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。  
技术咨询：[![JRedu技术交流][JRedu]][JRedu_JRedu]

[708076-20171018104318537-77152943.gif]: /images/20220330/2bf5292120334790abac9ac5f47f5e3d.png
[708076-20171018104717474-2127271649.png]: /images/20220330/0d8f2e1733864c5a9141b2243d550592.png
[708076-20171018105001927-1055992853.png]: /images/20220330/c40f5121113d47dca5216279d78d77e9.png
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20220330/e2e7eee5e3fe4b86abee0becc0a882dd.png
[jquery.scrollBanner.js.zip]: http://www.jredu100.com/uploadfile/2017/0919/20170919040903207.zip
[http_www.cnblogs.com_jerehedu]: http://www.cnblogs.com/jerehedu/
[Link 1]: http://www.jredu100.com/
[JRedu]: http://pub.idqqimg.com/wpa/images/group.png
[JRedu_JRedu]: /images/20220330/b579bf9c5e3742daa46f87af444a15e2.png