jquery 新闻轮换 插件及使用方法
2011-11-03 20:31
525 查看
插件源码:
使用方法:
另一个插件:http://www.givainc.com/labs/marquee_jquery_plugin.htm
/** * @author feiwen */ (function($){ $.fn.textSlider = function(settings){ settings = jQuery.extend({ speed : "normal", line : 2, timer : 1000 }, settings); return this.each(function() { $.fn.textSlider.scllor( $( this ), settings ); }); }; $.fn.textSlider.scllor = function($this, settings){ //alert($this.html()); var ul = $( "ul:eq(0)", $this ); var timerID; var li = ul.children(); var _btnUp=$(".up:eq(0)", $this) var _btnDown=$(".down:eq(0)", $this) var liHight=$(li[0]).height(); var upHeight=0-settings.line*liHight;//滚动的高度; var scrollUp=function(){ _btnUp.unbind("click",scrollUp); ul.animate({marginTop:upHeight},settings.speed,function(){ for(i=0;i<settings.line;i++){ //$(li[i]).appendTo(ul); ul.find("li:first").appendTo(ul); // alert(ul.html()); } ul.css({marginTop:0}); _btnUp.bind("click",scrollUp); //Shawphy:绑定向上按钮的点击事件 }); }; var scrollDown=function(){ _btnDown.unbind("click",scrollDown); ul.css({marginTop:upHeight}); for(i=0;i<settings.line;i++){ ul.find("li:last").prependTo(ul); } ul.animate({marginTop:0},settings.speed,function(){ _btnDown.bind("click",scrollDown); //Shawphy:绑定向上按钮的点击事件 }); }; var autoPlay=function(){ timerID = window.setInterval(scrollUp,settings.timer); //alert(settings.timer); }; var autoStop = function(){ window.clearInterval(timerID); }; //事件绑定 ul.hover(autoStop,autoPlay).mouseout(); _btnUp.css("cursor","pointer").click( scrollUp ); _btnUp.hover(autoStop,autoPlay); _btnDown.css("cursor","pointer").click( scrollDown ); _btnDown.hover(autoStop,autoPlay) }; })(jQuery);
使用方法:
$(document).ready(function(){ $(“#scrollDiv”).textSlider({ line:4, speed:500, timer:3000 }); });HTML写法:
<div id="scrollDiv"> <div class="scrollText"> <ul> <li>这是公告标题的第一行</li> <li>这是公告标题的第二行</li> <li>这是公告标题的第三行</li> <li>这是公告标题的第四行</li> <li>这是公告标题的第五行</li> <li>这是公告标题的第六行</li> <li>这是公告标题的第七行</li> <li>这是公告标题的第八行</li> <li>这是公告标题的第9行</li> <li>这是公告标题的第10行</li> <li>这是公告标题的第11行</li> <li>这是公告标题的第12行</li> </ul> </div> <div class="up">UP</div> <div class="down">down</div> </div>
另一个插件:http://www.givainc.com/labs/marquee_jquery_plugin.htm
相关文章推荐
- jQuery插件之AutoComplete使用方法
- 详解jQuery uploadify文件上传插件的使用方法
- Chosen 基于jquery的选择框插件使用方法
- jQuery验证插件validate使用方法详解
- jQuery jcrop插件截图使用方法
- Jquery Jcrop 插件使用方法
- Jquery插件 Jqgrid在ASP.Net下的使用方法与实例【转】
- jQuery之imgAreaSelect插件使用方法
- jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法
- 智能搜索jquery-autocomplete 自动填充插件使用方法及参数使用说明
- jQuery上传插件Uploadify的使用方法
- SlidesJS基本使用方法和官方文档解释 【Jquery幻灯片插件 Jquery相册插件】
- jQuery Validate 表单验证插件使用方法
- 缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解
- jquery插件treegrid树状表格的使用方法详解(.Net平台)
- jQuery jcrop插件截图使用方法
- 缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解
- jQuery的validate验证插件使用方法
- 在DotNetNuke模块里面使用Jquery插件的方法(转)
- jQuery插件placeholder的使用方法