快捷導(dǎo)航

jQuery簡(jiǎn)單自定義圖片輪播插件及用法示例

更新時(shí)間：2016年11月21日 08:50:42 作者：栁羅風(fēng)塵

這篇文章主要介紹了jQuery簡(jiǎn)單自定義圖片輪播插件及用法,結(jié)合實(shí)例形式分析了jQuery基于時(shí)間函數(shù)動(dòng)態(tài)修改頁(yè)面元素屬性實(shí)現(xiàn)圖片輪播功能的相關(guān)操作技巧,需要的朋友可以參考下

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

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

jQuery.banner.js：

/*
* banner 0.1
* 使用banner 實(shí)現(xiàn)圖片定時(shí)切換 鼠標(biāo)經(jīng)過(guò)停止動(dòng)畫(huà)
* 鼠標(biāo)離開(kāi)，繼續(xù)動(dòng)畫(huà)
*/
;(function($){
  $.fn.banner =function(options){
    //各種屬性和參數(shù)
    var defaults ={
       picWidth:"1000",
      picHeight:"300",
      speed:"1500"
    };
    var totalW = 0;  //保存總的動(dòng)畫(huà)寬度
    var timer = null; //保存定時(shí)器
    var current = 0; //保存當(dāng)前動(dòng)畫(huà)到第N張圖，下次從這里開(kāi)始
    var totalNum = 0; //保存總的圖數(shù)
    var Dsqtime = 0; //定義定時(shí)器時(shí)間 【外傳參數(shù)】
    var Dhtime = 0;  //定義動(dòng)畫(huà)時(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)畫(huà)
      show(__this, options.picWidth,current);
      //鼠標(biāo)經(jīng)過(guò)時(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)畫(huà)輪播
      });
    });
    //初始化 設(shè)定父容器寬度
    function init(obj){
      obj.find('ul li').each(function(){
         totalW += $(this).width();
         totalNum++;
       });
      obj.find('ul').width(totalW);
    }
    //開(kāi)始動(dòng)畫(huà)顯示
    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>

效果圖：