jQuery简单自定义图片轮播插件及用法示例

2019-11-19 18:54:53

字体：大中小

来源：转载

供稿：网友

本文实例讲述了jQuery简单自定义图片轮播插件及用法。分享给大家供大家参考，具体如下：

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

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('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>

效果图：