jquery上下循环滚动插件控制li上下循环滚动

最新推荐文章于 2019-10-15 12:37:53 发布

keyunq

最新推荐文章于 2019-10-15 12:37:53 发布

阅读量1.5w

点赞数

分类专栏： ajax-javascript 文章标签： jquery function scroll timer xhtml date

本文链接：https://blog.youkuaiyun.com/keyunq/article/details/7388249

版权

ajax-javascript 专栏收录该内容

32 篇文章

订阅专栏

/** 
 *  
 * 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>

资源实例下载：

http://download.youkuaiyun.com/detail/keyunq/4167184