Heim >php教程 >PHP开发 >Einfaches benutzerdefiniertes jQuery-Bildkarussell-Plug-in und Anwendungsbeispiele

Einfaches benutzerdefiniertes jQuery-Bildkarussell-Plug-in und Anwendungsbeispiele

高洛峰Original: 2016-12-06 13:18:531560Durchsuche

Das Beispiel in diesem Artikel beschreibt das einfache benutzerdefinierte Bildkarussell-Plug-in von jQuery und seine Verwendung. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Ich verwende oft die Plug-Ins anderer Leute und jetzt schreibe ich selbst eines, um daran zu erinnern.

jQuery.banner.js:

/*
* banner 0.1
* 使用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(&#39;ul li&#39;).bind(&#39;mouseover&#39;,function(){
        window.clearInterval(timer); //清除定时器
      });
      __this.find(&#39;ul li&#39;).bind(&#39;mouseout&#39;,function(){
        show(__this, options.picWidth,current);
         //接着上一次动画轮播
      });
    });
    //初始化 设定父容器宽度
    function init(obj){
      obj.find(&#39;ul li&#39;).each(function(){
         totalW += $(this).width();
         totalNum++;
       });
      obj.find(&#39;ul&#39;).width(totalW);
    }
    //开始动画显示
    function show(obj, width, current){
      timer = setInterval(function(){
      obj.find(&#39;ul&#39;).animate({&#39;margin-left&#39;:&#39;-&#39;+count*width+&#39;px&#39;},
         Dhtime);
          current = count;
          count++;
          if(count == totalNum){
           count =0;
          }
       }, Dsqtime);
    }
  };
})(jQuery);

HTML-Code:

<!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(){
       $(&#39;.wrap&#39;).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>

Rendering:

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：jQuery verwendet FormData, um das Hochladen von Dateien zu implementierenNächster Artikel：jQuery verwendet FormData, um das Hochladen von Dateien zu implementieren

In Verbindung stehende Artikel

Mehr sehen