轮播插件

/**
 * @author Administrator
 * @version 0.96
 */
(function ( $ ) {
    /*當前位置的計數
     * */
    var $mcount=0;
    /**
     * 父元素未加入元素时的宽度
     */
    var $width=0;
    /**
     * parentwo:是否在全屏时自动给父元素设置宽度,并且溢出隐藏
     * parento:是否给父元素设置溢出隐藏
     * autodots:是否自动添加点导航
     */
    $.fn.islider=function(options){
        var settings = $.extend({
            s:45,
            full:false,
            dots:false,
            autodots:false,
            dotsclass:'idot',
            nextclass:'inext',
            next:false,
            parento:false,
            parentw:false
            },options);
            $mcount=0;
$this=this;
if(settings.full){
        $hwidth=parseInt($(window).width());
        if(settings.parentw){
            this.parent().width($hwidth);
        }
        
    }else{
        $hwidth=parseInt(this.parent().width());
    }
    
        $children=this.children();
        $children.css('float','left');
        $children.css('width',$hwidth);
        $size=$children.size();
        
         $clone= $children.clone();
        
         
              
             this.width($hwidth*$size*2+'px');
             
        
         
         this.prepend($clone);
        $width=$hwidth*$size;
    $inter=    setInterval(function(){
    slider();
        },settings.s);
            
        this.on('mouseover',function(){
            clearInterval($inter);
        });
        /**
         * 用於輪播的匿名函數
         */
        function slider (argument) {
                  $marginleft=$this.css('margin-left');
            
  $marginleft=             parseInt($marginleft);
  
 $childh=   parseInt($this.children().width());
 $mcount=$marginleft%$childh;

  if(Math.abs($marginleft)>=$width){
      $this.css('margin-left',"0px");
  $marginleft=0;
  }else{
      if(argument){
      if($marginleft==0){
          $marginleft=$hwidth-$width;
      }else{
          $marginleft=$marginleft+$hwidth;
      }
          $this.animate({'margin-left':$marginleft+"px"});
            
      }else{
          $this.animate({'margin-left':$marginleft-$hwidth+"px"});
            $marginleft=$marginleft-$hwidth;
      }
            
        }
        $mcount=$marginleft/$hwidth;
        isdot();
        }
        
        this.on('mouseout',function(){
        $inter=setInterval(function(){
    slider();
        },settings.s);
        });
        
        /**
         * 判斷是否存在點導航        
         */
        function isdot(){
            if(settings.dots){
                $olli.removeClass('active');
                $olli.eq($mcount).addClass('active');
            }
        }
 if(settings.dots){
     /*
         *獲取點元素
         * */
        this.after('<ol class='+settings.dotsclass+'></ol>');
         $nextol=         this.next();
        for (var i=0; i < $size; i++) {
          $nextol.append('<li></li>');
        };
        
      $olli=   $nextol.children();

 $ollisize=$olli.size();
 
 $olli.on('click',function(){
     $nextsize=$(this).nextAll().size();
     $active=$ollisize- $nextsize;
     
     if($active===1){
         $hwa=$hwidth*$size;
     }else{
         $hwa=($nextsize+1)*$hwidth;
     }
        
     $this.animate({'margin-left':'-1'*$hwa+'px'});
     
     $olli.removeClass('active');
     $(this).addClass('active');
 });
 $nextol.on('mouseout',function(){
        $inter=setInterval(function(){
    slider();
        },settings.s);
        });
        $nextol.on('mouseover',function(){
            clearInterval($inter);
        });
 }
 
 /**
         * 上一頁和下一頁
         */
        if(settings.next){
                $next2ol=$('.'+settings.nextclass);
        $next2olli=$next2ol.children();
        
    
        $next2olli.on('click',function(){
            $active2=$(this).nextAll().size();
            
            if($active2==0){
                slider();
            }else{
                slider(true);
            }
            
            
     
     
        });
        
        $next2ol.on('mouseout',function(){
        $inter=setInterval(function(){
    slider();
        },settings.s);
        });
        $next2ol.on('mouseover',function(){
            clearInterval($inter);
        });
        }
    
  
        
    };
    
    }( jQuery ));
View Code

 写这个的原因是我的样式被插件弄得一团糟

所以你需要自己设置一些样式

/****

<ul class="islider">

 <li>foo1<li/>

 <li>foo2<li/>

 <li>foo3<li/>

 <li>foo4<li/>

</ul>

<script type="text/javascript">
    $('.islider').islider();
    
</script>

*******/

            s:45,///设置轮播速度
            full:false,///是否全屏
            dots:false,///是否显示点导航
            dotsclass:'idot',///给点导航设置的样式类
            nextclass:'inext',//// 上一页和下一页的样式类 
            next:false,////// 是否显示上一页和下一页,以及上一页和下一页的HTML标签要自己写
           
原文地址:https://www.cnblogs.com/zuoxiaobing/p/3595648.html