Home > Article > php教程 > jQuery simple custom image carousel plug-in and usage examples

jQuery simple custom image carousel plug-in and usage examples

高洛峰Original: 2016-12-06 13:18:531524browse

The example in this article describes the jQuery simple custom image carousel plug-in and its usage. Share it with everyone for your reference, the details are as follows:

I often use other people’s plug-ins, now I write one myself to commemorate it.

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:

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery uses FormData to implement file uploadNext article：jQuery uses FormData to implement file upload

See more

jQuery simple custom image carousel plug-in and usage examples

Related articles