jQuery扩展基本写法:

//jQuery.fn.extend 和 $.fn.extend都是可以的. jQuery.fn.extend({alert:function(){  alert($(this).html());   return $(this);},empty:function(){}  $(this).html('');   return $(this);});

如何使用jQuery扩展

     
      
12345
      
45678
     

$('#mydiv').alert();$('#mydiv').empty();

制作第一个jQuery插件slider

HTML代码

     
        
      
        		
       
1
                
       
2
                
       
3
        
      
        
      
               
       <               
       ●               
       ●               
       ●               
       >        
      
 
     

CSS代码

/* slider start */.m_slider ul,li{margin:0; padding:0; list-style:none}.m_slider .list{height:200px;position:relative;overflow:hidden}.m_slider .list li{width:100%;height:100%;position:absolute;display:none}/*button*/.m_slider .btn_group{text-align:center;margin:10px;}.m_slider .btn_group span{cursor:pointer;margin-right:10px;font: 14px SimSun}.m_slider .btn_group .btn{color:#ccc}.m_slider .btn_group .current{color:#444}.m_slider .btn_group .previous,.m_slider .btn_group .next{border:1px solid #888;padding:4px 10px}.m_slider .btn_group .previous:active,.m_slider .btn_group .next:active{background:#eee;cursor:pointer}/* slider end */

jQuery扩展

(function($){ var sets = {   speed:1000,   interval:2000 };  function getCurrent(cur,max){   return cur < max ? cur : 0; }  function getNext(cur,max){   return cur+1 >= max ? 0 : cur+1; }  function getLeftNext(cur,max){   return cur-1 < 0 ? max-1 : cur-1; }   $.fn.extend({ slider:function(options){   var $points = $(this).find('.btn'),       $list = $(this).find('.list li'),       $previousBtn = $(this).find('.previous'),       $nextBtn = $(this).find('.next'),       size = $list.length,       width = $(this).width(),       opts = $.extend({},sets,options||{}),       current,next,animate = false,timer,       run = function(){          timer = setInterval(function(){             doAnimate(true);         },opts.interval);      };    if(size ==1) {     showFirst(0);     return;  }    //给slider添加鼠标以上去停止动画,鼠标移出开始动画    $(this).hover(function(){clearInterval(timer);}, run);    //previous按钮    $previousBtn.click(function(){       if(! animate)doAnimate(false);      }    );  //next按钮    $nextBtn.click(function(){       if(! animate)doAnimate(true);      }    );    //圆点点击事件    $points.click(function(){      var index = $(this).index()-1;       showFirst(index);    });        showFirst(0);   run();        function doAnimate(direct){            animate = true;      current = getCurrent(current,size);      next = direct?getNext(current,size):getLeftNext(current,size);     var  $current = $list.eq(current);     var  $next = $list.eq(next);      markPoint(next);      $current.css({left:'0px',display:'block'});      var w1 = direct? width+'px' : -width+'px';      $next.css({left:w1,display:'block'});      var w2 = direct? -width+'px' : width+'px';      $current.animate({left:w2},{easing:'swing',duration:opts.speed,complete:function(){         $current.css('display','none');         animate =false;         current = direct ?  current+1 :  next ;      }});     $next.animate({left:'0px'},{easing:'swing',duration:opts.speed});    }      //显示第一张    function showFirst(index){       current = getCurrent(index,size);       $list.each(function(i){           if(i===current)                $(this).css({left:'0px',display:'block'});           else                $(this).css({display:'none'});       });       markPoint(index);    }      //圆点添加样式    function markPoint(index){     $points.each(function(i){         if(i == index){          $(this).attr('className','current');         }else{          $(this).attr('className','btn');         }     });    }     }});})(jQuery);

如何使用

$('#slider1').slider({speed:1000,interval:5000});