教你如何写插件

教你如何写插件，自己编写的第一个jQuery插件，图片轮播器

编写插件

学了jQuery一段时间，熟悉了jQuery的基本函数用法，然后自己慢慢尝试着写jQuery插件，提高能力。Demo 演示

怎么写出插件呢

第一步：定义插件我的插件模板是这样的：

slideShow是自己定义的函数名，也就是插件名称，方便别人调用。
$.extend()用法有好几种，这只主要用的这种用法：
$.extend(item,item1) 用这个方法，可以将所得的结果全部合并在{}中，并返回，而且还不会破坏原有的项的结构。
示例：

Var item={name:"olive",age:23};
Var item1={name:"Momo",sex:"gril"};
Var result=$.extend(item,item1);

结果：

Result={name:"Momo",age:23,sex:"gril"};

说明：以上的结果表明extend方法将所有的项都合并到了{}中，但是，细心一点就会发现，其中item1中的name：“Momo” 将item中的name：“olive”给覆盖了。
代码中的defaults就是设置的默认值，调用时通过传参覆盖defaults，来设定自己想要的功能，也可以对其进行扩展。fn函数在Demo里，类容太多就没用贴出来。

(function($) {
     $.fn.slideShow = function(opt) {
            var defaults = {
                "autoPlay": true,  //自动播放
                "autoPlayTime": 3000,  //自动播放的时间间隔
                 "eType": 'click',  //事件的类型
            };
            $.extend(defaults, opt);
            return this.each(fn);
    }
})(jQuery);

第二步：调用插件相信大家都看得懂吧

$(function() {
    $('#slide1').slideShow({"autoPlayTime": 2000,});
    $('#slide2').slideShow({"autoPlay": false,"eType": 'mouseover',});
});

HTML轮播器样式，HTML需要写成这个样子，active是当前显示

<div class = "slideShow"  id="slide1">
    <ul>
          <li><a href="#"><img src="img/tour1.png"></a></li>
          <li><a href="#"><img src="img/tour2.png"></a></li>
    </ul>
          <div class="nav">
                <span class="active">1</span>
                <span>2</sapn>
          </div>
</div>

上面的div中的ul是放置图片,class为nav的div是轮播器的导航下标，active表示当前的被选中状态。而css样式在Demo里面有，这里就不多介绍了。
我的博客