我的第一个jQuery扩展(slider)

浏览数：27 / 时间：2015年06月09日

jQuery扩展基本写法:

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

如何使用jQuery扩展

<div id="mydiv">
<p>12345</p>
<p>45678</p>
</div>
$(‘#mydiv‘).alert();
$(‘#mydiv‘).empty();

制作第一个jQuery插件slider

预览地址:预览

HTML代码

<div class="m_slider" id="slider1">
        <ul class="list">
        		<li style="background-color:#ccc">1</li>
                <li style="background-color:#aaa">2</li>
                <li style="background-color:#888">3</li>
        </ul>
        <div class="btn_group" onselectstart="return false;">
               <span class="previous"><</span>
               <span class="btn">●</span>
               <span class="btn">●</span>
               <span class="btn">●</span>
               <span class="next">></span>
        </div>
 </div>

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});

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： int 代码 c t text htm html ip class js display int 代码 c t text htm html ip class js display

相关文章

随机文章

您可能还喜欢

您可能还喜欢