手机版

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

时间:2021-09-12 来源:互联网 编辑:宝哥软件园 浏览:

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

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

jQuery.banner.js:

/**横幅0.1*使用旗帜实现图片定时切换鼠标经过停止动画* 鼠标离开,继续动画*/;(函数($){ $ .fn。横幅=函数(选项){ //各种属性和参数定义变量默认值={ picWidth: ' 1000 ',picHeight: ' 300 ',speed : ' 1500 ' };var TotalW=0;//保存总的动画宽度定义变量计时器=null/保存定时器定义变量电流=0;//保存当前动画到第普通张图,下次从这里开始var TotalNum=0;//保存总的图数var Dsqtime=0;//定义定时器时间【外传参数】var Dhtime=0;//定义动画时间定义变量计数=0;//合并多个对象为一个,即有新参数用新的,否则用默认的定义变量选项=$。扩展(默认值、选项);this.each(function(){ //实现代码var _ _ this=$(this);Dsqtime=options . speed dhtime=Dqtime/3;//初始化init(_ this);//调用动画show(_ this,options.picWidth,current);//鼠标经过时事件__this.find('ul li ').bind('mouseover ',function(){ window。clearinterval(计时器);//清除定时器});__this.find('ul li ').bind('mouseout ',function(){ show(_ this,options.picWidth,current);//接着上一次动画轮播});});//初始化设定父容器宽度函数init(obj){ obj.find('ul li ').每个(函数(){ totalW=$(this)).宽度();totalNum });obj.find('ul ')。宽度(TotaW);} //开始动画显示函数show(obj,width,current){ timer=setInterval(function(){ obj。find(' ul ').动画({ ' margin-left ' : '-' count * width ' px ' },Dhtime);当前=计数计数;if(count==TotalNum){ count=0;} },Dsqtime);} };})(jQuery);超文本标记语言代码:

!doctype html html head meta charset=' utf8 '/script type=' text/JavaScript ' src=' http :/js/jquery。量滴js/'脚本脚本类型=' text/JAVAScript ' src=' http :/js/jquery。班纳。js/'脚本脚本类型='text/javascript' $(文档)。ready(function(){ $(')).换行')。横幅({ picWidth: ' 1000 ',picHeight: ' 300 ',speed : ' 6000 ' });});/script style type=' text/CSS ' * { margin 33600;划水:0;} .包装{宽度:1000像素高度:300 px飞越:隐藏;margin:0 auto}。包装ul Li { float : left list-style : none;} .包装ul li img { width:1000px高度:300 px} .清除{clear:两者;}/style/head body div class=' wrap ' ul lia href=' # ' img src=' http :/images/1。jpg '/a/Li lia href=' # ' img src=' http :/images/2。jpg '/a/Li lia href=' # ' img src=' http :/images/3。jpg '/a/Li lia href=' # ' img src=' http :/images/4。jpg '/a/Li lia href=' # ' img src=' http :/images/5。jpg '/a/Li/ul div class=' clear '/div/div/div/body/html效果图:

更多关于jQuery相关内容感兴趣的读者可查看本站专题: 《jQuery常用插件及用法总结》 、 《jQuery扩展技巧总结》 、 《jQuery切换特效与技巧总结》 、 《jQuery遍历算法与技巧总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

版权声明:jQuery简单自定义图片轮播插件及用法示例是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。