前 言
JRedu
学习之前，首先我们需要知道什么是JQuery?
JQuery是一个优秀的javascript框架。
JQuery是继Prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。它是轻量级的js库，这是其它的js库所不及的，它兼容CSS3，还兼容各种常用浏览器。
JQuery是一个快速的，简洁的JavaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
JQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。JQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。进行jQuery插件开发前，首先要知道两个问题：什么是jQuery插件？jQuery插件如何使用？ 第一个问题，jQuery插件就是用来扩展jQuery原型对象的一个方法，简单来说就是jQuery插件是jQuery对象的一个方法。其实回答了第一个问题，也就知道第二个问题的答案了，jQuery插件的使用方式就是jQuery对象方法的调用。JQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前台页面上的组件都有对应插件，并且用JQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。
| 1、自定义插件的基础知识 |
1.1 插件的分类
插件分为两类。
一类叫做全局插件，另一种叫做局部插件。从名字我们就可以了解到两者的区别。
全局插件是作用于整个文档的插件。
局部插件是作用于某一块区域的插件。
1.2插件的声明和调用
1. 全局插件的声明
$.extend({ ??? func:function(){} // func-->插件名 })调用方式和函数类似
$.func();
2. 局部插件的声明
? ?$.fn.func = function(){}调用方式有所不同
$("选择器").func();| 2、 自定义插件的准备工作 |
2.1插件的功能介绍
该插件实现了Banner图的滚动效果。
插件具有以下属性：
images : 接受数组类型，数组的每个值应为对象。对象具有属性： src->图片的路径 title->图片指上后的文字 href->点击图片跳转的页面
scrollTime : 滚动时间，单位毫秒。 5000
bannerHeight : Banner图的高度. ?500px
iconColor : 提示图标的颜色。默认 white
iconHoverColor : 提示图标指上之后的颜色。 ?默认 orange
iconPosition : 提示图标的位置，可选值left/center/right。 默认center
2.2基础文件的准备
首先，我们需要新建一个HTML文件和一个JS文件。
然后将JS文件和JQuery文件导入进来。
然后新建一个空div。
<div id="banner"> ???????????</div>
用JQuery导入几张图片
???<script type="text/javascript"> ???????$("#banner").scrollBanner({ ???????????images : [ ???????????????{src:"img/banner1.jpg",href:"http://www.baidu.com"}, ???????????????{src:"img/banner2.jpg",href:"http://www.sina.com"}, ???????????????{src:"img/banner3.jpg",href:"http://www.qq.com"}, ???????????????{src:"img/banner4.jpg",href:"http://www.jredu100.com"}, ???????????], ???????}); ???</script>这样基本的准备工作就完成了，接下来就是插件的实现了。
| 3、 自定义插件的制作 |
3.1声明属性值
这是一个十分实用，使用起来也非常简单的banner图滚动插件。
首先创建一个作用于div的局部插件，然后设置属性默认值
??? $.fn.scrollBanner = function(obj){ ???????// 声明各个属性的默认值 ???????var defaults = { ???????????images : [], ???????????scrollTime : 2000, ???????????bannerHeight : "500px", ???????????iconColor : "white", ???????????iconHoverColor : "orange", ???????????iconPosition : "center" ????? } ???????// 将默认值与传入的对象比对，如果传入的对象有未赋值属性，则使用默认对象的属性 ???????obj = $.extend(defaults,obj);
}后面的代码全部写入这个函数中。
3.2组建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 data-index="+index+" class=‘scrollBanner-icon‘></span>"); ???????}); ???????????????$(".scrollBanner-icons").css({ ???????????"width":25*obj.images.length+"px", ???????????"height":"5px", ???????????"position":"absolute", ???????????"bottom":"40px", ???????????"left":"0px", ???????????"z-index":"100", ???????}); ???????switch(obj.iconPosition){ ???????????case "left": ???????????????$(".scrollBanner-icons").css({ ???????????????????"left":"50px", ???????????????}); ???????????????break; ???????????case "right": ???????????????$(".scrollBanner-icons").css({ ???????????????????"right":"50px", ???????????????}); ???????????????break; ???????????case "center": ???????????????$(".scrollBanner-icons").css({ ???????????????????"left":"50%", ???????????????????"margin-left":"-"+12.5*obj.images.length+"px" ???????????????}); ???????????????break; ???????} ???????$(".scrollBanner-icon").css({ ???????????"width":"15px", ???????????"height":"5px", ???????????"background-color":obj.iconColor, ???????????"display":"inline-block", ???????????"margin":"0px 5px", ???????});3.3设置CSS的属性
通过一段代码，进行简单的CSS设置。
???????this.css({ ???????????"width":"100%", ???????????"height":obj.bannerHeight, ???????????"overflow":"hidden", ???????????"position":"relative" ???????}) ???????????????$(".scrollBanner-banner").css({ ???????????"width":obj.images.length+1+"00%", ???????????"height":obj.bannerHeight, ???????????"transtition":"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-icon:eq(0)").css("background-color", obj.iconHoverColor);3.4实现banner图的滚动
实现banner图的不停滚动，基本原理是利用定时器。
然后不停改变最外面大div的margin-left属性，改变显示在屏幕上的图片，再加上适当的动画效果，形成滚动。
最后通过设定好的参数变量，修改滚动的速度。
同样的，附上一段代码。
???????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图就可以自动滚动了，可是一个只能不停滚动的banner图，可能并不符合我们的预期。
我们更想要的是一个可以随意切换自己想要的图片的效果。
3.5实现图片的自由切换
我们顺带做一个图片指上导航小图标，不仅切换图片，还让小图标变色的效果。
原理如下：
???????// 小图标指上以后变色并且切换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; // 将计数器count修改为index的值，让Banner滚动的定时器能够刚好滚到所指图片的下一张。 ???????????$(".scrollBanner-banner").css({ ???????????????"transition":"none", ???????????????"margin-left":"-"+index+"00%", ???????????}); ???????})这样，一个非常好用的banner图滚动插件就完成了。
当我们使用的时候，只需新建一个div，起好ID，然后用JS将需要滚动的图片导入即可。
这便是制作一个小插件的基本原理和思路了，希望能帮助到一些初学者。
之后会陆续更新这一系列，给大家带来更多的实用小技巧。
希望大家多多批评指正。
JQuery实用技巧--学会你也是大神(1)——插件的制作技巧
原文地址：http://www.cnblogs.com/lihaohai/p/7530758.html