當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

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

發(fā)布時(shí)間：2025/7/14 编程问答 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 JQuery自定义插件详解之Banner图滚动插件小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

? 前 ?言

JRedu

　JQuery是什么相信已經(jīng)不需要詳細(xì)介紹了。作為時(shí)下最火的JS庫(kù)之一，JQuery將其“Write Less，Do More！”的口號(hào)發(fā)揮的極致。而幫助JQuery實(shí)現(xiàn)“寫的更少，做的更多”的重要一環(huán)就是JQuery的插件，成千上萬(wàn)的JQ插件幫助我們實(shí)現(xiàn)了幾乎你所需要的所有功能，大大簡(jiǎn)化了程序猿的工作量。

　但是，別人的終究是別人的，吃別人的永遠(yuǎn)長(zhǎng)大不！那么，我們能不能自己定義一款插件呢？Of Course！當(dāng)前可以！今天就讓我們來(lái)一探JQuery自定義插件的神秘面紗吧！

一、JQuery自定義插件基礎(chǔ)

要想制作一款屬于自己的插件，首先我們要了解JQuery自定義插件的機(jī)制。在JQuery中，我們可以通過(guò)兩種常用的方式定制自己的插件：

通過(guò)$.extend()來(lái)擴(kuò)展jQuery
通過(guò)$.fn向jQuery添加新的方法

那么兩種定制方式，有什么不同呢？這就要從插件的分類說(shuō)起……

1.1 全局插件與局部插件

JQuery中的插件、方法可以分為兩大類，全局插件和局部插件。

形如“$.POST()、$.GET()、$.each()”這樣的方法/插件,我們稱為全局插件。這類插件的特點(diǎn)是，無(wú)需使用選擇器選取任意節(jié)點(diǎn)，直接使用”$.”調(diào)用方法或插件。

而形如”$(‘#div1’).css()、$(‘#div1’).attr()”這樣的方放/插件，我們成為局部插件。這類插件的特點(diǎn)是，需要首先使用選擇器選中一個(gè)節(jié)點(diǎn)，再調(diào)用方法或者插件。

那么。我們上述提到的兩種定義插件的方法，就分別對(duì)應(yīng)著全局插件和布局插件。使用$.extend()定義的插件，即為全局插件；使用$.fn定義的插件，即為局部插件。

1.2全局插件的定義

如上所述，全局插件使用$.extend()定義。 $.extend()本身是JQuery內(nèi)置的一個(gè)方法，該方法接受對(duì)象類型的參數(shù)，對(duì)象中的鍵就是插件名，所對(duì)應(yīng)的函數(shù)就是插件的操作。

? ?1.2.1 全局插件定義結(jié)構(gòu)

全局插件聲明： $.extend({ func:function(){} // func-->插件名 }); 全局插件調(diào)用： $.func();

? ?1.2.2 全局插件示例

/*全局插件*/$.extend({count : num,sayHello : function(){ // 無(wú)參插件alert("hello JQuery！！");},say : function(message){ // 傳參插件alert("你說(shuō)了："+message);}});$.sayHello();$.say("hahahahaha");

1.3 局部插件的定義

與定義全局插件的$.extend()方法不同，定義局部插件所有的$.fn并不是方法，而本事是一個(gè)內(nèi)置對(duì)象，那么我們?cè)谑褂闷涠x插件的時(shí)候，就可以直接在$.fn上追加新的方法，這個(gè)方法，就是我們所定義的局部插件。

? ?1.3.1 局部插件定義結(jié)構(gòu)

局部插件聲明： $.fn.func = function(){} 局部插件調(diào)用： $("選擇器").func();

? ?1.3.2 局部插件示例

$.fn.setFont = function(obj){var defaults = {// 設(shè)置默認(rèn)值"font-size":"12px","font-weight":"normal","font-family":"宋體"}// 將默認(rèn)值與傳入的obj比對(duì)。并返回一個(gè)新對(duì)象。// 如果obj里面有的屬性，則使用obj的屬性。// 如果obj沒有聲明的屬性則使用默認(rèn)值里面的屬性var newObj = $.extend(defaults,obj);// 在$.fn聲明的插件函數(shù)中，可以使用this代指調(diào)用這個(gè)插件的對(duì)象節(jié)點(diǎn)。// 而且，this是一個(gè)JQuery對(duì)象return this.css(newObj);// 將調(diào)用當(dāng)前函數(shù)的對(duì)象(this)返回，可以保證JQuery的鏈?zhǔn)秸{(diào)用語(yǔ)法//return this; };$("div").setFont({//"font-size":"48px",//"font-weight":"bold",//"font-family":"微軟雅黑",//"color":"red", }).css("text-align","center");

? ?1.3.3 局部插件定義詳解

大家一定看到了，局部插件中出現(xiàn)了很多大家不太熟悉的寫法，我們一起來(lái)解釋一下：

① 插件的方法參數(shù)，應(yīng)該是對(duì)象類型

我們已經(jīng)用過(guò)很多插件了，由于插件需要給使用者提供接口設(shè)置非常多的屬性和回調(diào)，我們往往采用的是給插件傳入一個(gè)對(duì)象類型的參數(shù)，將所有需要配置項(xiàng)封裝在對(duì)象中。

② 可以給插件的參數(shù)屬性，設(shè)置默認(rèn)值

插件提供的屬性設(shè)置越多，表示這個(gè)插件越靈活、功能越強(qiáng)大，但是如果要求用戶把幾十個(gè)上百個(gè)屬性全部設(shè)置，這就過(guò)分了。所以我們需要給絕大部分屬性提供一套默認(rèn)值。方法就是在對(duì)象中聲明一個(gè)defaults對(duì)象，包含用戶需要傳入?yún)?shù)的所有默認(rèn)值。

然后使用這一行代碼：

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

系統(tǒng)會(huì)自動(dòng)比對(duì)defaults對(duì)象與用戶傳入的obj對(duì)象，如果obj對(duì)象有設(shè)置的屬性則使用obj的屬性，如果用戶沒有傳入設(shè)置，則使用defaults對(duì)象的默認(rèn)值。

③ 插件函數(shù)內(nèi)部的this，代指調(diào)用插件的選擇器節(jié)點(diǎn)。是一個(gè)JQuey對(duì)象。

因?yàn)榫植坎寮枰冗x中節(jié)點(diǎn)，在使用節(jié)點(diǎn)調(diào)用插件，那么當(dāng)我們需要在插件中修改調(diào)用插件的節(jié)點(diǎn)時(shí)，可以使用this代指調(diào)用這個(gè)插件的節(jié)點(diǎn)。

注意！！！這個(gè)this是一個(gè)JQuery對(duì)象，只能使用JQuery相關(guān)方法。

④ 在插件的最后return?this 保證JQuery的鏈?zhǔn)秸Z(yǔ)法

我們都知道JQuery是一種鏈?zhǔn)秸Z(yǔ)發(fā)，可以連續(xù)調(diào)用多個(gè)方法。因?yàn)榻^大部分JQuery內(nèi)置方法的返回值，都是調(diào)用這個(gè)方法的對(duì)象本身。

那么，如果我們的插件沒有返回值，就打斷了JQuery的鏈?zhǔn)秸Z(yǔ)法，在第③條中我們提到，插件中的this就是調(diào)用這個(gè)插件的對(duì)象，那么在插件的最后return?this，就可以保證JQuery的鏈?zhǔn)秸Z(yǔ)發(fā)的有效性。

二、自定義Banner圖滾動(dòng)插件

上面呢，我們學(xué)習(xí)了如何使用JQuery自定義一個(gè)插件。那接下來(lái)，我們來(lái)做一個(gè)幾乎每個(gè)網(wǎng)站都用得到的功能。自定義一個(gè)Banner圖滾動(dòng)插件！

2.1插件的基本功能

首先，我們來(lái)了解一下這個(gè)插件的基本功能，效果圖如下：

從效果圖可以看出，我們的Banner滾動(dòng)插件可以包含多張Banner圖片，并且可以實(shí)現(xiàn)圖片的自動(dòng)循環(huán)滾動(dòng)；同時(shí)下方有對(duì)應(yīng)圖片張數(shù)的指示符，鼠標(biāo)指到對(duì)應(yīng)的指示符上面，可以直接將圖片定位到指定位置。

2.2插件的實(shí)現(xiàn)思路

了解了插件的基本功能后，我們來(lái)探討一下插件的實(shí)現(xiàn)思路。在這款插件中，我們給用戶提供了如下設(shè)置屬性的接口。

插件支持設(shè)置的屬性接口

images : 接受數(shù)組類型，數(shù)組的每個(gè)值應(yīng)為對(duì)象。對(duì)象具有屬性： src->圖片的路徑 title->圖片指上后的文字 ??href->點(diǎn)擊圖片跳轉(zhuǎn)的頁(yè)面

scrollTime : 每張圖片的停留時(shí)間，單位毫秒。 2000

bannerHeight : Banner圖的高度. ?500px

iconColor : 提示圖標(biāo)的顏色。默認(rèn) white

iconHoverColor : 提示圖標(biāo)指上之后的顏色。 ?默認(rèn) orange

iconPosition : 提示圖標(biāo)的位置，可選值left/center/right。默認(rèn)center

而我們的插件名稱為jquery.scrollBanner.js，用戶只需要引入我們的插件文件，并且選中一個(gè)div節(jié)點(diǎn)，調(diào)用插件方法，傳入設(shè)置參數(shù)即可生成banner圖滾動(dòng)插件。

用戶使用插件代碼詳解：

使用起來(lái)是不是非常簡(jiǎn)單！！但是，每一個(gè)使用簡(jiǎn)單的插件背后，都有N多行苦逼的JS源碼！~~o(>_<)o ~~?接下來(lái)我們來(lái)看一下插件的源碼實(shí)現(xiàn)吧！

2.3 插件的詳細(xì)代碼實(shí)現(xiàn)

其實(shí)Banner圖滾動(dòng)插件的實(shí)現(xiàn)思路并不難，主要分為這樣幾步：

? ?2.3.1 搭建插件框架并設(shè)置默認(rèn)參數(shù)

第一步，我們應(yīng)該先取到用戶傳入的參數(shù)，并聲明一個(gè)默認(rèn)對(duì)象，借助$.extend比對(duì)默認(rèn)對(duì)象與用戶傳入的對(duì)象，確定最后的參數(shù)。

!function($){$.fn.scrollBanner = function(obj){// 聲明各個(gè)屬性的默認(rèn)值var defaults = {images : [],scrollTime : 2000,bannerHeight : "500px",iconColor : "white",iconHoverColor : "orange",iconPosition : "center"}// 將默認(rèn)值與傳入的對(duì)象比對(duì)，如果傳入的對(duì)象有未賦值屬性，則使用默認(rèn)對(duì)象的屬性obj = $.extend(defaults,obj);} }(jQuery);

? ?2.3.2?利用取到的對(duì)象組裝DOM結(jié)構(gòu)

由于我們調(diào)用插件時(shí)，只需要用戶選中一個(gè)Div即可，那么div中的所有結(jié)構(gòu)均需要我們使用JQuery操作DOM書寫。詳細(xì)代碼：

// 組件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標(biāo)簽上保存數(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為這個(gè)虛擬的DOM結(jié)構(gòu)設(shè)置CSS樣式，讓其呈現(xiàn)為我們想要看到Banner圖布局與樣式。

詳細(xì)代碼如下：

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?實(shí)現(xiàn)Banner圖自動(dòng)滾動(dòng)功能

截止到上一步，我們已經(jīng)將DOM結(jié)構(gòu)組裝完畢并且設(shè)置了CSS布局與樣式。也就是說(shuō)，我們擁有了完整的HTML布局。那接下來(lái)，我們就可以讓Banner圖“滾起來(lái)”了！

詳細(xì)代碼如下：

? ? 2.3.5?指示圖標(biāo)指上變色并切換Banner圖到指定位置

我們的Banner圖可以滾動(dòng)之后，這個(gè)插件的功能就接近尾聲啦！還剩下最后一步，我們鼠標(biāo)指在下方的小圖標(biāo)上，可以直接讓Banner圖跳轉(zhuǎn)到指定位置！

詳細(xì)代碼如下：

// 小圖標(biāo)指上以后變色并且切換Banner圖$(".scrollBanner-icon").mouseover(function(){$(".scrollBanner-icon").css("background-color",obj.iconColor);// ↓ 由span觸發(fā)mouseover事件，則this指向這個(gè)span。// ↓ 但是，這this是JS對(duì)象，必須使用$封裝成JQuery對(duì)象。$(this).css("background-color",obj.iconHoverColor);var index = $(this).attr("data-index");// 將計(jì)數(shù)器count修改為index的值，讓Banner滾動(dòng)的定時(shí)器能夠剛好滾到所指圖片的下一張count = index; $(".scrollBanner-banner").css({"transition": "none","margin-left": "-"+index+"00%"});});

好啦！到這里，我們的全部功能就實(shí)現(xiàn)完畢啦！！是不是非常神奇！！我們也是擁有屬于自己插件的人啦！

需要源碼的同學(xué)可以點(diǎn)擊下載：jquery.scrollBanner.js.zip

有任何問題，也歡迎大家評(píng)論區(qū)留言探討哦！

作者：杰瑞教育
出處：http://www.cnblogs.com/jerehedu/?
版權(quán)聲明：本文版權(quán)歸煙臺(tái)杰瑞教育科技有限公司和博客園共有，歡迎轉(zhuǎn)載，但未經(jīng)作者同意必須保留此段聲明，且在文章頁(yè)面明顯位置給出原文連接，否則保留追究法律責(zé)任的權(quán)利。
技術(shù)咨詢：

轉(zhuǎn)載于:https://www.cnblogs.com/jerehedu/p/7685596.html

總結(jié)

以上是生活随笔為你收集整理的JQuery自定义插件详解之Banner图滚动插件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： python 回溯法子集树模板系列
下一篇：为什么“或命题真假的判断是有真则真？