简单图片轮播插件

待我称王封你为后i 2022-08-12 00:17 243阅读 0赞

经常使用别人的插件，现在自己写一个，纪念一下。

jquery.banner.js

/*
    *  banner 0.1
    *  Copyright (c) 2014 friker http://blog.csdn.net/wujiangwei567
    *  Date: 2014-09-05
    *  使用banner 实现图片定时切换  鼠标经过停止动画
    *  鼠标离开，继续动画
    */
    ;(function($){
        $.fn.banner =function(options){
    	   //各种属性和参数
    	   var defaults ={
    	   	      picWidth:"1000",
                picHeight:"300",
                speed:"1500"
    	   };
           
           var totalW = 0;   //保存总的动画宽度
           var timer = null; //保存定时器
           var current = 0;  //保存当前动画到第N张图，下次从这里开始
           var totalNum = 0; //保存总的图数
           var Dsqtime = 0;  //定义定时器时间  【外传参数】
           var Dhtime = 0;   //定义动画时间
           var count = 0 ;
           
           //合并多个对象为一个，即有新参数 用新的，否则用默认的
           var options = $.extend(defaults, options);
           this.each(function(){
               
                //实现代码
                var __this = $(this);
                Dsqtime = options.speed;
                Dhtime = Dsqtime/3;
              
    
                //初始化
                init(__this);
                //调用动画
                show(__this, options.picWidth,current);
                
    
                //鼠标经过时事件
                __this.find('ul li').bind('mouseover',function(){
                    window.clearInterval(timer); //清除定时器
                });
                __this.find('ul li').bind('mouseout',function(){
                    show(__this, options.picWidth,current);              
                     //接着上一次动画轮播
                });
    
           });
    
           //初始化 设定父容器宽度
           function init(obj){
               obj.find('ul li').each(function(){
                     totalW += $(this).width();
                     totalNum++;
                 });
               obj.find('ul').width(totalW);
           }
    
           //开始动画显示
           function show(obj, width, current){
               timer = setInterval(function(){
               obj.find('ul').animate({'margin-left':'-'+count*width+'px'},
                      Dhtime);
                       current = count;
                       count++;
                       if(count == totalNum){
                          count =0;
                       }
                 }, Dsqtime);
           }
    
    	};
    	
    
    })(jQuery);

html代码

<!doctype html>
    <html>
      <head>
         <meta charset="utf8"/>
      	 <script type="text/javascript" src="./js/jquery.min.js"></script>
         <script type="text/javascript" src="./js/jquery.banner.js"></script>
      	 <script type="text/javascript">
     	     $(document).ready(function(){
    		     $('.wrap').banner({
    			    picWidth:"1000",
                    picHeight:"300",
    			    speed:"6000"
    			 });
    		 });
    
      	 </script>
      	 <style type="text/css">
    	     *{margin:0;padding:0;}
    	     .wrap{width:1000px; height:300px; overflow:hidden; margin:0 auto;}
             .wrap ul li{float:left; list-style:none;}
    		 .wrap ul li img{width:1000px;height:300px;}
             .clear{clear: both;}
      	 </style>
      </head>
      <body>
      	 <div>
            <div class="wrap">
    		    <ul>
    				<li><a href="#"><img src="./images/1.jpg"/></a></li>
    				<li><a href="#"><img src="./images/2.jpg"/></a></li>
    				<li><a href="#"><img src="./images/3.jpg"/></a></li>
    				<li><a href="#"><img src="./images/4.jpg"/></a></li>
    				<li><a href="#"><img src="./images/5.jpg"/></a></li>
    			</ul>
    			<div class="clear"></div>
    		</div>
      	 </div>
      </body>
    </html>

效果图

![20140905170257564][]

[20140905170257564]: /images/20220810/e81ab71a48bd4a168263e8ba148ba4ed.png