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

本文实例讲述了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程序设计有所帮助。