JQuery自定義插件詳解之Banner圖滾動插件

時間  2019-11-05
標籤 jquery 自定義 插件 詳解 banner 滾動 欄目 JQuery 简体版
原文   原文鏈接

  前  言css

JRedujquery

　JQuery是什麼相信已經不須要詳細介紹了。做爲時下最火的JS庫之一，JQuery將其「Write Less，Do More！」的口號發揮的極致。而幫助JQuery實現「寫的更少，作的更多」的重要一環就是JQuery的插件，成千上萬的JQ插件幫助咱們實現了幾乎你所須要的全部功能，大大簡化了程序猿的工做量。數組

　可是，別人的終究是別人的，吃別人的永遠長大不！那麼，咱們能不能本身定義一款插件呢？Of Course！當前能夠！今天就讓咱們來一探JQuery自定義插件的神祕面紗吧！app

 

1、JQuery自定義插件基礎

要想製做一款屬於本身的插件，首先咱們要了解JQuery自定義插件的機制。 在JQuery中，咱們能夠經過兩種經常使用的方式定製本身的插件：框架

  • 經過$.extend()來擴展jQuery
  • 經過$.fn向jQuery添加新的方法

那麼兩種定製方式，有什麼不一樣呢？這就要從插件的分類提及……ide

 

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的鏈式語發的有效性。

 

2、自定義Banner圖滾動插件

 

上面呢，咱們學習瞭如何使用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

有任何問題，也歡迎你們評論區留言探討哦！

 

做者：傑瑞教育
出處： http://www.cnblogs.com/jerehedu/ 
版權聲明：本文版權歸煙 臺 傑瑞教育 科 技有限公司和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。
技術諮詢：JRedu技術交流
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程