码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2014-09-14 21:54:37      阅读:276      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   io   使用   java   ar   div   sp   

接触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)添加“上一张”、“下一张”按钮

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

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

 1 <script type="text/javascript">
 2     $("#rotate .pack .left").hover(
 3                 function(){
 4                     $("#rotate .pack .left .prot").show();    
 5                 },
 6                 function(){
 7                     $("#rotate .pack .left .prot").hide();    
 8                 }
 9             );
10 
11             $("#rotate .pack .right").hover(
12                 function(){
13                     $("#rotate .pack .right .next").show();    
14                 },
15                 function(){
16                     $("#rotate .pack .right .next").hide();    
17                 }
18             );
19 
20             $("#rotate .pack .left").click(
21                 function(){
22                     var id = $("#rotate .pack img").attr("id");
23                     var n = parseInt(id.substr(1));
24                     n = n == 0 ? 4 : (n-1);
25                     $("#rotate .pack img").attr({"src":Imgs[n],"id":"p"+n});
26                     $("#rotate .pack .rotate_btn .btns").css({"background-color":"yellow","color":"#000"});
27                     $("#rotate .pack .rotate_btn .btn_"+n).css({"background-color":"red","color":"#fff"});
28                 }
29             );
30 
31             $("#rotate .pack .right").click(
32                 function(){
33                     var id = $("#rotate .pack img").attr("id");
34                     var n = parseInt(id.substr(1));
35                     n = n == 4 ? 0 : (n+1);
36                     $("#rotate .pack img").attr({"src":Imgs[n],"id":"p"+n});
37                     $("#rotate .pack .rotate_btn .btns").css({"background-color":"yellow","color":"#000"});
38                     $("#rotate .pack .rotate_btn .btn_"+n).css({"background-color":"red","color":"#fff"});
39                 }
40             );
41 
42             $("#rotate .pack .rotate_btn .btns").click(
43                 function(){
44                     var text = parseInt($(this).text())-1;
45                     $("#rotate .pack img").attr({"src":Imgs[text],"id":"p"+text});
46                     $("#rotate .pack .rotate_btn .btns").css({"background-color":"yellow","color":"#000"});
47                     $("#rotate .pack .rotate_btn .btn_"+text).css({"background-color":"red","color":"#fff"});
48                 }
49             );
50 </script>

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

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

 

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

标签:style   blog   color   io   使用   java   ar   div   sp   

原文地址:http://www.cnblogs.com/bikeway/p/3971561.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!