jQuery简单自定义图片轮播插件及用法示例
2016-11-21 08:50
1011 查看
本文实例讲述了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>
效果图:
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- jQuery滚动条美化插件nicescroll简单用法示例
- 最简单的jQuery图片轮播插件
- 自定义JQuery插件(附图片轮播banner实现)
- jQuery实现的简单图片轮播效果完整示例
- jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
- 轻量级的 jquery 自定义弹窗插件 用法简单
- jQuery实现图片简单轮播功能示例
- jQuery自适应轮播图插件Swiper用法示例
- 五滴水:使用Ajax+jQuery来实现前端收到的数据在console上显示+简单的主页设计与bootstrap插件实现图片轮播
- jQuery中的类名选择器(.class)用法简单示例
- 网站项目必备——12款经典的白富美型 jQuery 图片轮播插件
- 一个非常简洁的 jQuery 图片轮播插件
- 一个简单的图片切换 jQuery 插件
- jQuery中可见性过滤器简单用法示例
- jQuery/Zepto的Bootstrap轮播图中图片自适应宽高并居中插件
- jQuery图片轮播插件——前端开发必看
- 推荐两款简单好用的图片放大jquery插件
- 利用jquery的imgAreaSelect插件实现图片裁剪示例