| 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>
效果图
图片是临时找的，不太清晰，大家将就着看吧。
但是，图片虽不清晰，该有的功能还是有的。到了这里，相信大家，应该也能够独自，编写一个属于自己的插件了吧~~