jQuery控制li上下循环滚动插件用法实例（附demo源码下载）

本文实例讲述了jQuery控制li上下循环滚动插件用法。分享给大家供大家参考，具体如下：

/** * * jQuery scrollQ plugin li上下滚动插件 * @name jquery-scrollQ.js * @author Q * @date 2012-03-23 * line 显示li行数 * scrollNum 每次滚动li行数 * scrollTime 滚动速度 单位毫秒 * */（function（$）{var status = false;$.fn.scrollQ = function（options）{var defaults = {line:4,scrollNum:2,scrollTime:1000}var options=jQuery.extend（defaults,options）;var _self = this;return this.each（function（）{$（"li",this）.each（function（）{$（this）.css（"display","none"）;}）$（"li:lt（"+options.line+"）",this）.each（function（）{$（this）.css（"display","block"）;}）function scroll（） {for（i=0;i<options.scrollNum;i++） {var start=$（"li:first",_self）;start.fadeOut（100）;start.css（"display","none"）;start.appendTo（_self）;$（"li:eq（"+（options.line-1）+"）",_self）.each（function（）{$（this）.fadeIn（500）;$（this）.css（"display","block"）;}）}}var timer;timer = setInterval（scroll,options.scrollTime）;_self.bind（"mouseover",function（）{clearInterval（timer）;}）;_self.bind（"mouseout",function（）{timer = setInterval（scroll,options.scrollTime）;}）;}）;}}）（jQuery）;

调用方式如下：

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>test</TITLE><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7/jquery.min.js"></script><script type="text/javascript" src="scrollQ.js"></script><script type="text/javascript">$（document）.ready（function（）{$（"#sItem"）.scrollQ（）;}）;</script></head><body><div><ul id="sItem"><li>标题1</li><li>标题2</li><li>标题3</li><li>标题4</li><li>标题5</li><li>标题6</li><li>标题7</li><li>标题8</li><li>标题9</li><li>标题10</li></ul></div></body></html>

完整实例代码点击此处本站下载。
PS：这里再为大家推荐几款代码格式化、美化工具，相信大家在以后的开发过程中会用得到：
在线JavaScript代码美化、格式化工具：
http://tools.jb51.net/code/js
JavaScript压缩/格式化/加密工具：
http://tools.jb51.net/code/jscompress
PHP代码在线格式化美化工具：
http://tools.jb51.net/code/phpformat
XML代码在线格式化美化工具：
http://tools.jb51.net/code/xmlcodeformat
json代码在线格式化/美化/压缩/编辑/转换工具：
http://tools.jb51.net/code/jsoncodeformat
在线JSON代码检验、检验、美化、格式化工具：
http://tools.jb51.net/code/json
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jquery中Ajax用法总结》、《jQuery表格（table）操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。