jquery插件的写法

1.jquery 插件的结构：

(function($){

//扩展这个方法到jquery

$.fn.extend({

//插件名字

pluginname:function(options){

//设置默认值

var deafualts={

}

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

//遍历匹配元素的集合

return this.each(function(){

//编写相应代码进行处理

var o=options;//获取对象

});

}

})

})(jQuery);

2.下面是本人写的一个定时切换图片的插件

(function($){
$.fn.extend({

scroll:function(options){
var defaults={
Speed:1000,
time:2000
};
var options = $.extend(defaults,options);

return this.each(function(){
var o=options;
var $self=$(this);
var obj=$(this).parent();
var index=0;
var adTimer;
var len=$self.siblings().children("li").length;
$self.siblings().children("li").mouseover(function(){
index=$self.siblings().children("li").index(this);
var height=obj.height();
$self.stop(true,false).animate({top:-height*index},o.Speed);
$self.siblings().children("li").removeClass("on").eq(index).addClass("on");
}).eq(0).mouseover();

obj.hover(function(){
clearInterval(adTimer);
},function(){
adTimer=setInterval(function(){
var height=obj.height();
$self.stop(true,false).animate({top:-height*index},o.Speed);
$self.siblings().children("li").removeClass("on").eq(index).addClass("on");
index++;
if(index==len)
{
index=0;
}
},o.time);
}).trigger("mouseleave");

});
}
});
})(jQuery);

说明：对象options是传过来的一个UL，UL下有4个5个LI，每个LI包含一个图片，obj=$(this).parent()是获取包含UL的DIV层，$self.siblings().children("li")是获取与传过来的UL是兄弟节点的另一个UL，其下有5个LI，包含数字一到五，图片和数字式同时改变的。下面是HTML代码：

<div class="ad">
<ul class="slider">
<li><img src="images/ads/1.gif"></li>
<li><img src="images/ads/2.gif"></li>
<li><img src="images/ads/3.gif"></li>
<li><img src="images/ads/4.gif"></li>
<li><img src="images/ads/5.gif"></li>
</ul>
<ul class="num">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>

再上CSS代码实现布局：

.ad{
height:150px;
width:586px; 
overflow:hidden;
position:relative;
}
.slider img{ 
width:586px; 
height:150px;
display:block;
}
.slider,.num{
margin:0px;
padding:0px;
position:absolute;
}
.slider li{
list-style:none;
display:inline;
}
.num {
bottom:5px;
right:5px;
}
.num li{
float:left;
color: #FF7300;
text-align: center;
line-height: 16px;
width: 16px;
height: 16px;
list-style:none;
font-family: Arial;
font-size: 12px;
cursor: pointer;
overflow: hidden;
margin: 3px 1px;
border: 1px solid #FF7300;
background-color: #fff;
}
. .num li.on{
color: #fff;
line-height: 21px;
width: 21px;
height: 21px;
font-size: 16px;
margin: 0 1px;
border: 0;
background-color: #FF7300;
font-weight: bold;
}

插件使用方法：//在使用之前要先引入jquery和这个插件

$(function(){
$(".slider").scroll({Speed:1000,time:3000});

});