• 轮播插件


    /**
     * @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标签要自己写
               
  • 相关阅读:
    HTTP状态码总结
    spring boot 文件上传
    JQuery Ajax上传文件
    git常用的操作
    git使用ssh clone时报错
    openssl安装
    h5 手机浏览器打开app
    火狐浏览器刷新后表单不重置 (自动填充)
    js Date() 相关
    css中的定位
  • 原文地址:https://www.cnblogs.com/zuoxiaobing/p/3595648.html
Copyright © 2020-2023  润新知