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

前端之家收集整理的这篇文章主要介绍了jQuery简单自定义图片轮播插件及用法示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

jQuery.banner.js:

图片定时切换 鼠标经过停止动画 * 鼠标离开,继续动画 */ ;(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,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代码

<Meta charset="utf8"/>

猜你在找的jQuery相关文章