【图片轮播特效插件】--- 自学入门

接触jQuery很久了，深深的被其强大的选择器和众多的插件特效所折服，而在实际的项目中为了项目进度，常常都是从网上搜索各种急需的插件。

突然有一天，静静的坐下来，沉淀知识时总是没有太多的惊喜。尤其是提到插件的使用，总是一味的照搬照抄必然得不到成长。避开项目业务中可能会遇到复杂繁琐的项目功能不说，许多简单的功能完全可以自己封装成一个插件，毕竟自己动手产生的乐趣才最有意义。

对于这次jQuery插件的编写，我打算用三篇随笔来完成，尽量总结到方方面面，还希望各位多多拍砖（各位拍砖也是我学习的动力^_^）

首先是开始学习jQuery插件的开发，总结了前人的经验以及网上搜索到的各种教程，下面便是我对插件开发的体会：

1、插件开发遵循常规的框架

这都是布道者们勤劳、智慧的结晶，使用一套经过验证的框架足可避免出现各种奇葩bug，也让二次开发变得更加容易（这会在第三篇随笔中有体现），而我们需要做的便是能在开发过程中体会框架设计中的智慧。就像一个刚建好的空房间，我们只要知道房间的构造、承重墙、管道布线，掌握之后就是开始合理运用其框架开始精装修了。。。

2、插件代码全部放在闭包里面

用了许多插件，大多都能看到这样一段相同的代码

(function($){

　　//input your code

})(jQuery);

上面定义了一个jQuery函数，形参是$，函数定义完成后，把jQuery这个实参传递进去，立即调用执行。

这样的好处是，我们在写jQuery插件时，也可以使用这个$别名，而不会与prototype引起冲突。

同时插件里的代码只为自己的插件服务，闭包外的方法则不能调用。

优点：

a)避免全局依赖；

b)避免第三方破坏；

c)兼容jQuery操作符'$'和'jQuery'

3、提供插件默认选项

插件默认的设置很有必要，而让开发者能够自定义设置，只需要通过jQuery的extend 功能来设置这些选项。

var options = $.extend(defaults,options);

当开发者在调用的时候写了新的参数，插件就会调用新的参数；如果没有写，就会用默认的参数。

4、区别jQuery.fn.extend(object)和jQuery.extend(object)

jQuery为开发插件提供了两个方法：

jQuery.fn.extend(object);//对jQuery.prototype进行扩展，给jQuery对象添加方法（成员函数）

jQuery.extend(object);//扩展jQuery类本身，为类添加新的静态方法

（由于初次尝试自己开发jQuery插件，总结会有许多不足和失误，但随笔内容会随着个人的积累而不断修改更新。还是那句话，欢迎各位拍砖^_^）

-------------------------------------------------------------------------^_^我是分割线----------------------------------------------------------------------

接下来就是开始这次插件开发的设计，这也是非常重要的第一步。确定好合适的功能，对于初学不是很难，但也不能简单到一无是、处派不上场，那也不是我们学习的目的。

最终确定的功能是：

a)图片能每隔一个确定的时间就滚动交替；

b)图片交换，对应的图片标记或编号能及时改变；

c)默认图片从右向左滚动，开发者可自定义滚动方向：左->右、上->下、下->上。

带扩展功能：

a)添加touch事件；

b)点击图片对应标记或编号时，能对应展示相应的图片；

c)添加“上一张”、“下一张”按钮

-----------------------------------------------------------^_^分割线君----------------------------------------------------------------------

有这个写插件的想法也是不久前写的一个图片交换效果产生的（话说，那效果写出来，感觉就是一个字---“真搓”），把代码贴出来，刺激一下自己（求拍砖）：

<script type="text/javascript">
$("#rotate .pack .left").hover(
function(){
$("#rotate .pack .left .prot").show();
},
function(){
$("#rotate .pack .left .prot").hide();
}
);

$("#rotate .pack .right").hover(
function(){
$("#rotate .pack .right .next").show();
},
function(){
$("#rotate .pack .right .next").hide();
}
);

$("#rotate .pack .left").click(
function(){
var id = $("#rotate .pack img").attr("id");
var n = parseInt(id.substr(1));
n = n == 0 ? 4 : (n-1);
$("#rotate .pack img").attr({"src":Imgs
,"id":"p"+n});
$("#rotate .pack .rotate_btn .btns").css({"background-color":"yellow","color":"#000"});
$("#rotate .pack .rotate_btn .btn_"+n).css({"background-color":"red","color":"#fff"});
}
);

$("#rotate .pack .right").click(
function(){
var id = $("#rotate .pack img").attr("id");
var n = parseInt(id.substr(1));
n = n == 4 ? 0 : (n+1);
$("#rotate .pack img").attr({"src":Imgs
,"id":"p"+n});
$("#rotate .pack .rotate_btn .btns").css({"background-color":"yellow","color":"#000"});
$("#rotate .pack .rotate_btn .btn_"+n).css({"background-color":"red","color":"#fff"});
}
);

$("#rotate .pack .rotate_btn .btns").click(
function(){
var text = parseInt($(this).text())-1;
$("#rotate .pack img").attr({"src":Imgs[text],"id":"p"+text});
$("#rotate .pack .rotate_btn .btns").css({"background-color":"yellow","color":"#000"});
$("#rotate .pack .rotate_btn .btn_"+text).css({"background-color":"red","color":"#fff"});
}
);
</script>

虽然能实现点击按钮切换图片，最然能点击标号切换图片，最然。。。。。但是，哎，这代码搓的！！！太简单了，html代码就不贴了，我去反思，脑补下。

下一篇随文将推到之前的一切，将确定的功能封装成一个jQuery插件。