jquery循环滚动插件

自己写的一个jquery循环滚动插件

 

插件jquery.looproll.js代码：

//jquery循环滚动插件
jQuery.fn.looproll=function(options){
	var setting={
		speed: 1000 ,
		interval:3000
	};
	if(options){
		$.extend(setting,options);
	};
	
	//取得滚动的容器和需要滚动的内容
	var rollBox=this;
	var rollContent=this.children();
	
	//添加一个包裹标签
	var rollBody=$('<div id="rollBody"></div>');
	rollBox.prepend(rollBody); 
	rollBody.prepend(rollContent);
	if(rollContent.height()<rollBox.height()){
		alert("循环滚动插件错误：滚动内容的高度必须大于容器的高度");
	}

	//开始滚动
	var i=0;
	setInterval(function(){
		i++;
		var uppx=-rollBox.height()*i;
		rollBody.animate({marginTop : uppx},setting.speed);
		n=Math.floor(rollContent.height()/rollBox.height());//滚动内容与容器的倍数
		if(i%n==0){//滚动到底部时，复制一份滚动内容
			rollBody.append(rollContent.clone());
		}
	},setting.interval);
	
};

调用：

<script language="javascript" src="./jquery.js"></script>
<script language="javascript" src="./jquery.looproll.js"></script>
<script language="javascript">
$(function(){
	$("#newslist").looproll();
 	//$("#newslist").looproll({speed:300,interval:1000});//speed：单次滚动的速度，单位毫秒；interval：多长时间滚动一次，单}); 

</script>


<div id="newlist" style="width:300px; height:100px; border:solid #999999 1px; overflow:hidden;">
	<div style="line-height:35px; border:#006699 solid 1px; margin-left:5px;">
		222<br>333<br>444<br>555<br>6666<br>7777<br>888<br>9999<br>
	</div>
</div>

 注意网页编码要为utf-8编码