前 言
jQuery是一個功能強大的庫，提供了開發JavaScript項目所需的所有核心函數。很多時候我們使用jQuery的原因就是因為其使用插件的功能，然而，有時候我們還是需要使用自定義代碼來擴展這些核心函數來提高開發效率。我們知道， jQuery庫是為了加快JavaScript的開發速度而設計的，通過簡化編寫JavaScript的方式，減少代碼量。所以，今天就帶大家了解一下jQuery自定義插件以及自定義插件案例---banner圖滾動。
| 1.1 自定義插件基礎知識 |
在正式編寫屬於自己的插件之前，首先要了解自定義插件的相關知識。
1.1.1插件的聲明與調用
| 3.1 Android 事件基礎知識 |
1、全局插件聲明：
$.extend({
func1 : function(){}; //func1 --> 插件名
func2 : function(){}; //func2 --> 插件名
});
全局插件調用
$.func1();
$.func2();
2、局部插件聲明
$.fn.func = function(){};
局部插件調用
$("選擇器").func();
實例代碼
1.1.2全局插件
$.extend({
say : function(message){
alert("你說了："+message);
},
});
$.say("哈哈哈哈");
代碼效果：
1.1.3局部插件
聲明：
<body>
<div id="div1">
這是div1 里面的文字
</div>
<div id="div2">
這是div2里面的文字
</div>
</body>
$.fn.setFont = function(obj){
//設置默認值
var defaults = {
"font-size" : "12px",
"font-weight" : "normal",
"font-family" : "宋體",
"color" : "blue"
};
//將默認值的屬性值，與對應的傳入的obj屬性值對比。如果，obj里面有該屬性，則使用obj里面的屬性 //如果,obj里面沒有該屬性,則使用默認值 var newObj = $.extend(defaults,obj);
this.css(newObj);
//將調用當前函數的對象(this)返回，可以保證JQuery的鏈式調用語法 return this;
};
調用：
$("#div1").setFont({
"font-size" : "20px",
"font-weight" : "bold",
"font-family" : "微軟雅黑",
//"color" : "red"
}).setBgColor().css("text-align","center");//setBgColor沒有返回值，故.css()無法執行 //$("#div1").setFont().css("text-align","center").setBgColor(); //setFont()和.css()有返回值，setBgColor()沒有返回值，故可以全部執行。但如果在setBgColor()后面再加函數，則無法執行。
代碼效果：
| 2.1 實例講解 |
經過上面的講解，相信大家對JQuery自定義插件都有了一定的了解。大家也都發現了，自定義插件的基礎知識，比較簡單。下面，我們就通過一個習題，再一次的深入的理解下JQuery插件的編寫過程。
完整JS代碼
/*該插件實現了banner圖的滾動效果 * * 1、插件的屬性 * images ： 接受數組類型，數組的每個值為對象。對象具有屬性： src -->圖片路徑 title--> 圖片指上后的提示文字 href-->點擊圖片跳轉頁面 * scrollTime : 圖片停留時間，單位毫秒 默認 5000 * bannerHeight ：banner圖的高度 默認 500px * * iconColor ：導航默認顏色：white * iconHoverColor ： 鼠標指上導航后的顏色 默認：orange * iconPosition ：導航的位置，可選值：left、right、center。 默認：center * */ !function($){ $.fn.scrollBanner = function(obj){ $("body").css({ "padding": "0px", "margin": "0px", }); //聲明默認值 var defaults = { images : [], scrollTime : 2000, bannerHeight : "500px", iconColor : "white", iconHoverColor : "orange", iconPosition : "center" }; //將默認值與傳入的對象進行比對，如果傳入的對象有未賦值屬性，則使用默認對象的屬性 obj = $.extend(defaults,obj); //組建DOM布局 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>") }); //設置各種CSS 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": "1", }); switch (obj.iconPosition){ case "left": $(".scrollBanner-icons").css({ "left" :"40px" }); break; case "center": $(".scrollBanner-icons").css({ "left" :"50%", "margin-left": "-"+12.5*obj.images.length+"px", }); break; case "right": $(".scrollBanner-icons").css({ "right" :"40px" }); break; } $(".scrollBanner-icon").css({ "width": "15px", "height": "7px", "background-color": obj.iconColor, "display": "inline-block", "margin": "0px 5px", }); //實現banner圖滾動 var count = 1; var icons = $(".scrollBanner-icon"); $(".scrollBanner-icon:eq(0)").css("background-color", obj.iconHoverColor); 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":" all .0s ease", }); }; count++; },obj.scrollTime); //導航指上后變色，並切換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({ "margin-left" : "-"+index+"00%", "transition":"none", }); }); } }(jQuery)
調用的HTMl代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>banner圖滾動</title> <script src="../JS/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script> <script src="../JS/jquery,scrollBanner.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="banner"> </div> </body> <script type="text/javascript"> $("#banner").scrollBanner({ images : [ {src : "../img/banner1.jpg",title : "banner1",href :"http://www.baidu.com"}, {src : "../img/banner2.jpg",title : "banner2",href :"http://www.sina.com.cn"}, {src : "../img/banner3.jpg",title : "banner3",href :"http://www.qq.com"}, {src : "../img/banner4.jpg",title : "banner4",href :"http://www.jredu100.com"} ], scrollTime : 2000, bannerHeight : "500px", iconColor : "yellow", iconHoverColor : "blue", iconPosition : "center" }); </script> </html>
效果圖
圖片是臨時找的，不太清晰，大家將就着看吧。
但是，圖片雖不清晰，該有的功能還是有的。到了這里，相信大家，應該也能夠獨自，編寫一個屬於自己的插件了吧~~