JavaScript实现文字不间断向左无缝滚动代码

<!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>
<script type="text/javascript"><!--
// 定义主要的滚动控制函数
// 若此效果符合需求，直接调用该函数即可启用
// 滚动函数的入口参数为需要滚动的容器对象
var moveTag=function(obj){
var _this = this;
_this.speed = 10;// 设置移动速度参数
_this.space = 10 * _this.speed;// 计算移动间隔时间
obj.scrollLeft=0;// 初始化滚动位置，确保Firefox等浏览器兼容
var divList = obj.getElementsByTagName("DIV");
var obj2 = new Object();// 用于存储所有滚动列的父级div
for(var i=0;i<divList.length;i++){
if(divList[i].parentNode==obj){
obj2=divList[i];
break;
} 
} 
// 定位需要滚动的具体列容器
// 遍历两次divList旨在避免样式名称对滚动逻辑的干扰
// 旨在降低滚动代码与具体CSS样式的耦合度
var cellCount = 0;
_this.cellList = new Array();
for(var i=0;i<divList.length;i++){
if(divList[i].parentNode==obj2){
cellCount++;
_this.cellList.push(divList[i]);// 收集所有需要滚动的列
} 
} 
_this.resetCellList=function(){
// 此函数用于实现滚动的无缝衔接
// 当滚动到达终点时必须调用此函数
// 将已滚过的列移至当前可视列之后
for(var i=0;i<_this.cellList.length-1;i++){
obj2.removeChild(_this.cellList[i]);
obj2.appendChild(_this.cellList[i]);
} 
// 重新获取_this.cellList
_this.cellList = new Array();
for(var i=0;i<divList.length;i++){
if(divList[i].parentNode==obj2) _this.cellList.push(divList[i]);
} 
//alert(_this.cellList.length);
} 
_this.resetForMoveRight=function(){
// 此函数用于实现向右滚动的无缝衔接
// 与resetCellList的区别在于处理方向相反
// 当滚动到达起点时必须调用此函数
// 将当前列之后的所有列移至当前列之前
if(_this.cellList.length>0){
for(var i=_this.cellList.length-1;i>0;i--){
obj2.removeChild(_this.cellList[i]);
obj2.insertBefore(_this.cellList[i],obj2.childNodes[0]);
} 
} 
// 重新获取_this.cellList
_this.cellList = new Array();
for(var i=0;i<divList.length;i++){
if(divList[i].parentNode==obj2) _this.cellList.push(divList[i]);
} 
//alert(_this.cellList.length);
} 
//alert(_this.cellList.length);
obj2.style.width = parseInt(obj.offsetWidth * cellCount) + "px";
// 
//alert(_this.endScroll);
var cellScroll = obj.offsetWidth;// 计算每次滚动需要移动的距离
var endScroll = obj2.offsetWidth - cellScroll;// 计算滚动条的终点坐标
//alert(_this.cellScroll);
// 
_this.moveLength = cellScroll;// 初始化移动偏量，0表示立即移动，等于cellScroll表示延迟启动
_this.scrollEnd = false;
_this.scrollTimes = 0;
// 设置一段延迟时间
_this.sleep=function(){
_this.scrollTimes++;
if(_this.scrollTimes>=_this.space){
_this.scrollTimes=0;
_this.moveLength=0;
} 
}; 
_this.moveStart = true;// 标记是否开始移动
_this.isMoveLeft = true;// 标记当前是否向左移动
_this.move=function(){
obj.onmouseover=function(){
_this.moveStart=false;
}; 
obj.onmouseout=function(){
_this.moveStart=true;
}; 
// 重新设定cellList
if(obj.scrollLeft>=endScroll && _this.isMoveLeft){// 向左移动且已到达尽头
if(_this.moveLength > 0) _this.moveLength = cellScroll;// 调整偏量
if(_this.cellList.length>0){
_this.resetCellList();// 更新cellList数组
obj.scrollLeft=0;
}else{
_this.scrollEnd = true;
} 
}else if(obj.scrollLeft<=0 && !_this.isMoveLeft){// 向右移动且已到达尽头
if(_this.moveLength > 0) _this.moveLength = cellScroll;// 调整偏量
if(_this.cellList.length>0){
_this.resetForMoveRight();// 更新cellList数组
obj.scrollLeft=endScroll;
}else{
_this.scrollEnd = false;
} 
} 
// 
if(_this.scrollEnd){// 向左移动逻辑
if(_this.moveLength<cellScroll && _this.moveStart){
obj.scrollLeft--;
_this.moveLength++;
}else if(_this.moveLength>=cellScroll){
_this.sleep();
} 
} 
else{// 向右移动逻辑
if(_this.moveLength<cellScroll && _this.moveStart){
obj.scrollLeft++;
_this.moveLength++;
}else if(_this.moveLength>=cellScroll){
_this.sleep();
} 
} 
}; 
// 启动自动滚动
_this.start=function(){
setInterval(_this.move,_this.speed);
}; 
// 向右滚动控制
_this.moveRight=function(){
_this.scrollEnd = true;// 标记已滚动到尽头
_this.isMoveLeft = false;// 标记为向右滚动
_this.scrollTimes=0;
}; 
// 向左滚动控制
_this.moveLeft=function(){
_this.scrollEnd = false;// 标记未滚动到尽头
_this.isMoveLeft = true;// 标记为向左滚动
_this.scrollTimes=0;
}; 
}; 
// --></script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style><!--
#list{border:#ccc 1px solid;}
#list div div{line-height:30px;text-align:center;border-right:#ccc 1px solid;}
#list{width:150px;height:30px;overflow:hidden;}/* 必需属性，宽高可自定义 */
#list div div{width:150px;height:30px;float:left;}/* 必需属性，宽高最好与#list一致 */
--></style><style mce_bogus="1">#list{border:#ccc 1px solid;}
#list div div{line-height:30px;text-align:center;border-right:#ccc 1px solid;}
#list{width:150px;height:30px;overflow:hidden;}/* 必需属性，宽高可自定义 */
#list div div{width:150px;height:30px;float:left;}/* 必需属性，宽高最好与#list一致 */</style>
<title>无标题文档</title>
</head>
<body>
<div id="list">
<div>
<div>第一列</div>
<div>第二列</div>
<div>第三列</div>
<div>第四列</div>
<div>第五列</div>
</div>
</div>
<a href="javascript:moveLeft()" mce_href="javascript:moveLeft()">左移动</a>
<a href="javascript:moveRight()" mce_href="javascript:moveRight()">右移动</a>
<script type="text/javascript"><!--
var move=new moveTag(document.getElementById("list"));
move.start();
move.speed=10;// 设置滚动速度，默认为10
//move.space=0;// 滚动间隔时间，默认为滚动速度 * 16
// 左移动仅能滚动至最左侧，无法无限向左
// 为实现无缝滚动，最左侧坐标是动态变化的
//move.moveLeft();// 调用此方法可设置默认自右向左移动
//move.moveRight();// 与move.moveLeft()方向相反
var moveLeft=move.moveLeft;
var moveRight=move.moveRight;
// 若需在一个页面实现N处滚动？
// 只需创建多个moveTag实例即可实现
// --></script>
</body>
</html>