JQuery自定义插件详解之Banner图滚动插件
? 前 ?言
JRedu
JQuery是什么相信已經(jīng)不需要詳細介紹了。作為時下最火的JS庫之一,JQuery將其“Write Less,Do More!”的口號發(fā)揮的極致。而幫助JQuery實現(xiàn)“寫的更少,做的更多”的重要一環(huán)就是JQuery的插件,成千上萬的JQ插件幫助我們實現(xiàn)了幾乎你所需要的所有功能,大大簡化了程序猿的工作量。
但是,別人的終究是別人的,吃別人的永遠長大不!那么,我們能不能自己定義一款插件呢?Of Course!當前可以!今天就讓我們來一探JQuery自定義插件的神秘面紗吧!
?
| 一、JQuery自定義插件基礎(chǔ) |
要想制作一款屬于自己的插件,首先我們要了解JQuery自定義插件的機制。 在JQuery中,我們可以通過兩種常用的方式定制自己的插件:
- 通過$.extend()來擴展jQuery
- 通過$.fn向jQuery添加新的方法
那么兩種定制方式,有什么不同呢?這就要從插件的分類說起……
?
1.1 全局插件與局部插件
JQuery中的插件、方法可以分為兩大類,全局插件和局部插件。
形如“$.POST()、$.GET()、$.each()”這樣的方法/插件,我們稱為全局插件。這類插件的特點是,無需使用選擇器選取任意節(jié)點,直接使用”$.”調(diào)用方法或插件。
而形如”$(‘#div1’).css()、$(‘#div1’).attr()”這樣的方放/插件,我們成為局部插件。這類插件的特點是,需要首先使用選擇器選中一個節(jié)點,再調(diào)用方法或者插件。
那么。我們上述提到的兩種定義插件的方法,就分別對應著全局插件和布局插件。使用$.extend()定義的插件,即為全局插件;使用$.fn定義的插件,即為局部插件。
?
1.2全局插件的定義
如上所述,全局插件使用$.extend()定義。 $.extend()本身是JQuery內(nèi)置的一個方法,該方法接受對象類型的參數(shù),對象中的鍵就是插件名,所對應的函數(shù)就是插件的操作。
? ?1.2.1 全局插件定義結(jié)構(gòu)
全局插件聲明: $.extend({ func:function(){} // func-->插件名 }); 全局插件調(diào)用: $.func();?
? ?1.2.2 全局插件示例
/*全局插件*/$.extend({count : num,sayHello : function(){ // 無參插件alert("hello JQuery!!");},say : function(message){ // 傳參插件alert("你說了:"+message);}});$.sayHello();$.say("hahahahaha");?
1.3 局部插件的定義
與定義全局插件的$.extend()方法不同,定義局部插件所有的$.fn并不是方法,而本事是一個內(nèi)置對象,那么我們在使用其定義插件的時候,就可以直接在$.fn上追加新的方法,這個方法,就是我們所定義的局部插件。
? ?1.3.1 局部插件定義結(jié)構(gòu)
?
局部插件聲明: $.fn.func = function(){} 局部插件調(diào)用: $("選擇器").func();?
? ?1.3.2 局部插件示例
?
$.fn.setFont = function(obj){var defaults = {// 設(shè)置默認值"font-size":"12px","font-weight":"normal","font-family":"宋體"}// 將默認值與傳入的obj比對。 并返回一個新對象。// 如果obj里面有的屬性,則使用obj的屬性。// 如果obj沒有聲明的屬性則使用默認值里面的屬性var newObj = $.extend(defaults,obj);// 在$.fn聲明的插件函數(shù)中,可以使用this代指調(diào)用這個插件的對象節(jié)點。// 而且,this是一個JQuery對象return this.css(newObj);// 將調(diào)用當前函數(shù)的對象(this)返回,可以保證JQuery的鏈式調(diào)用語法//return this; };$("div").setFont({//"font-size":"48px",//"font-weight":"bold",//"font-family":"微軟雅黑",//"color":"red", }).css("text-align","center");?
? ?1.3.3 局部插件定義詳解
大家一定看到了,局部插件中出現(xiàn)了很多大家不太熟悉的寫法,我們一起來解釋一下:
① 插件的方法參數(shù),應該是對象類型
我們已經(jīng)用過很多插件了,由于插件需要給使用者提供接口設(shè)置非常多的屬性和回調(diào),我們往往采用的是給插件傳入一個對象類型的參數(shù),將所有需要配置項封裝在對象中。
?
② 可以給插件的參數(shù)屬性,設(shè)置默認值
插件提供的屬性設(shè)置越多,表示這個插件越靈活、功能越強大,但是如果要求用戶把幾十個上百個屬性全部設(shè)置,這就過分了。所以我們需要給絕大部分屬性提供一套默認值。方法就是在對象中聲明一個defaults對象,包含用戶需要傳入?yún)?shù)的所有默認值。
然后使用這一行代碼:
var newObj = $.extend(defaults,obj);系統(tǒng)會自動比對defaults對象與用戶傳入的obj對象,如果obj對象有設(shè)置的屬性則使用obj的屬性,如果用戶沒有傳入設(shè)置,則使用defaults對象的默認值。
?
③ 插件函數(shù)內(nèi)部的this,代指調(diào)用插件的選擇器節(jié)點。是一個JQuey對象。
因為局部插件需要先選中節(jié)點,在使用節(jié)點調(diào)用插件,那么當我們需要在插件中修改調(diào)用插件的節(jié)點時,可以使用this代指調(diào)用這個插件的節(jié)點。
注意!!!這個this是一個JQuery對象,只能使用JQuery相關(guān)方法。
?
④ 在插件的最后return?this 保證JQuery的鏈式語法
我們都知道JQuery是一種鏈式語發(fā),可以連續(xù)調(diào)用多個方法。因為絕大部分JQuery內(nèi)置方法的返回值,都是調(diào)用這個方法的對象本身。
那么,如果我們的插件沒有返回值,就打斷了JQuery的鏈式語法,在第③條中我們提到,插件中的this就是調(diào)用這個插件的對象,那么在插件的最后return?this,就可以保證JQuery的鏈式語發(fā)的有效性。
?
| 二、自定義Banner圖滾動插件 |
?
上面呢,我們學習了如何使用JQuery自定義一個插件。那接下來,我們來做一個幾乎每個網(wǎng)站都用得到的功能。自定義一個Banner圖滾動插件!
?
2.1插件的基本功能
首先,我們來了解一下這個插件的基本功能,效果圖如下:
?
?
從效果圖可以看出,我們的Banner滾動插件可以包含多張Banner圖片,并且可以實現(xiàn)圖片的自動循環(huán)滾動;同時下方有對應圖片張數(shù)的指示符,鼠標指到對應的指示符上面,可以直接將圖片定位到指定位置。
?
2.2插件的實現(xiàn)思路
了解了插件的基本功能后,我們來探討一下插件的實現(xiàn)思路。 在這款插件中,我們給用戶提供了如下設(shè)置屬性的接口。
插件支持設(shè)置的屬性接口
images : 接受數(shù)組類型,數(shù)組的每個值應為對象。對象具有屬性: src->圖片的路徑 title->圖片指上后的文字 ??href->點擊圖片跳轉(zhuǎn)的頁面
scrollTime : 每張圖片的停留時間,單位毫秒。 2000
bannerHeight : Banner圖的高度. ?500px
iconColor : 提示圖標的顏色。默認 white
iconHoverColor : 提示圖標指上之后的顏色。 ?默認 orange
iconPosition : 提示圖標的位置,可選值left/center/right。 默認center
?
而我們的插件名稱為jquery.scrollBanner.js,用戶只需要引入我們的插件文件,并且選中一個div節(jié)點,調(diào)用插件方法,傳入設(shè)置參數(shù)即可生成banner圖滾動插件。
?
用戶使用插件代碼詳解:
使用起來是不是非常簡單!!但是,每一個使用簡單的插件背后,都有N多行苦逼的JS源碼!~~o(>_<)o ~~?接下來我們來看一下插件的源碼實現(xiàn)吧!
?
2.3 插件的詳細代碼實現(xiàn)
其實Banner圖滾動插件的實現(xiàn)思路并不難,主要分為這樣幾步:
? ?2.3.1 搭建插件框架并設(shè)置默認參數(shù)
第一步,我們應該先取到用戶傳入的參數(shù),并聲明一個默認對象,借助$.extend比對默認對象與用戶傳入的對象,確定最后的參數(shù)。
!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結(jié)構(gòu)
由于我們調(diào)用插件時,只需要用戶選中一個Div即可,那么div中的所有結(jié)構(gòu)均需要我們使用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標簽上保存數(shù)據(jù)的屬性。// 保存在data-*中的數(shù)據(jù),可以使用JS讀取調(diào)用。$(".scrollBanner-icons").append("<span class='scrollBanner-icon' data-index='"+index+"'></span>");})?
組裝好的DOM結(jié)構(gòu)如下圖所示:
?
? ?2.3.3?為組裝好的DOM結(jié)構(gòu)設(shè)置CSS樣式
DOM結(jié)構(gòu)組裝完畢后,我們需要使用JQuery為這個虛擬的DOM結(jié)構(gòu)設(shè)置CSS樣式,讓其呈現(xiàn)為我們想要看到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}); 設(shè)置各種css?
? ?2.3.4?實現(xiàn)Banner圖自動滾動功能
截止到上一步,我們已經(jīng)將DOM結(jié)構(gòu)組裝完畢并且設(shè)置了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); 實現(xiàn)Banner滾動功能?
?
? ? 2.3.5?指示圖標指上變色并切換Banner圖到指定位置
我們的Banner圖可以滾動之后,這個插件的功能就接近尾聲啦!還剩下最后一步,我們鼠標指在下方的小圖標上,可以直接讓Banner圖跳轉(zhuǎn)到指定位置!
詳細代碼如下:
// 小圖標指上以后變色并且切換Banner圖$(".scrollBanner-icon").mouseover(function(){$(".scrollBanner-icon").css("background-color",obj.iconColor);// ↓ 由span觸發(fā)mouseover事件,則this指向這個span。// ↓ 但是,這this是JS對象,必須使用$封裝成JQuery對象。$(this).css("background-color",obj.iconHoverColor);var index = $(this).attr("data-index");// 將計數(shù)器count修改為index的值,讓Banner滾動的定時器能夠剛好滾到所指圖片的下一張count = index; $(".scrollBanner-banner").css({"transition": "none","margin-left": "-"+index+"00%"});});?
好啦!到這里,我們的全部功能就實現(xiàn)完畢啦!!是不是非常神奇!!我們也是擁有屬于自己插件的人啦!
需要源碼的同學可以點擊下載:jquery.scrollBanner.js.zip
有任何問題,也歡迎大家評論區(qū)留言探討哦!
?
作者:杰瑞教育出處:http://www.cnblogs.com/jerehedu/?
版權(quán)聲明:本文版權(quán)歸煙臺杰瑞教育科技有限公司和博客園共有,歡迎轉(zhuǎn)載,但未經(jīng)作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接,否則保留追究法律責任的權(quán)利。
技術(shù)咨詢:
轉(zhuǎn)載于:https://www.cnblogs.com/jerehedu/p/7685596.html
總結(jié)
以上是生活随笔為你收集整理的JQuery自定义插件详解之Banner图滚动插件的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: python 回溯法 子集树模板 系列
- 下一篇: 为什么“或命题真假的判断是有真则真?