jQuery簡單自定義圖片輪播插件及用法示例

2019-11-19 18:54:53

字體：大中小

供稿：網(wǎng)友

本文實(shí)例講述了jQuery簡單自定義圖片輪播插件及用法。分享給大家供大家參考，具體如下：

經(jīng)常使用別人的插件，現(xiàn)在自己寫一個(gè)，紀(jì)念一下。

jQuery.banner.js：

/** banner 0.1* 使用banner 實(shí)現(xiàn)圖片定時(shí)切換 鼠標(biāo)經(jīng)過停止動(dòng)畫* 鼠標(biāo)離開，繼續(xù)動(dòng)畫*/;(function($){  $.fn.banner =function(options){    //各種屬性和參數(shù)    var defaults ={       picWidth:"1000",      picHeight:"300",      speed:"1500"    };    var totalW = 0;  //保存總的動(dòng)畫寬度    var timer = null; //保存定時(shí)器    var current = 0; //保存當(dāng)前動(dòng)畫到第N張圖，下次從這里開始    var totalNum = 0; //保存總的圖數(shù)    var Dsqtime = 0; //定義定時(shí)器時(shí)間 【外傳參數(shù)】    var Dhtime = 0;  //定義動(dòng)畫時(shí)間    var count = 0 ;    //合并多個(gè)對(duì)象為一個(gè)，即有新參數(shù) 用新的，否則用默認(rèn)的    var options = $.extend(defaults, options);    this.each(function(){      //實(shí)現(xiàn)代碼      var __this = $(this);      Dsqtime = options.speed;      Dhtime = Dsqtime/3;      //初始化      init(__this);      //調(diào)用動(dòng)畫      show(__this, options.picWidth,current);      //鼠標(biāo)經(jīng)過時(shí)事件      __this.find('ul li').bind('mouseover',function(){        window.clearInterval(timer); //清除定時(shí)器      });      __this.find('ul li').bind('mouseout',function(){        show(__this, options.picWidth,current);         //接著上一次動(dòng)畫輪播      });    });    //初始化 設(shè)定父容器寬度    function init(obj){      obj.find('ul li').each(function(){         totalW += $(this).width();         totalNum++;       });      obj.find('ul').width(totalW);    }    //開始動(dòng)畫顯示    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>

效果圖：