非常不错的不间断循环滚动类兼容多浏览器

摘要：调用的方法：首先你得把脚本链接到你的页面，或者直接调用下面这个链接也行。当然，最好还是下载到你自己的机器上。复制代码代码如下:下面是第一种使...

调用的方法：

首先你得把脚本链接到你的页面，或者直接调用下面这个链接也行。当然，最好还是下载到你自己的机器上。

复制代码代码如下:<scripttype="text/javascript"src="http://www.aeroom.org/include/scripts/scrollingAD.js"></script>下面是第一种使用方法，看起来似乎比较麻烦一点，但是只需要两行代码；

复制代码代码如下:varsampleDiv=newscrollingAD("divId",200,100,"yellow","up",10,2000,20,true);

sampleDiv.move();

这样将根据文档中id="divId"的某个DIV对象来创建一个不间断的循环滚动区域。该区域的宽度为200px，高度为100px，背景颜色为黄色（不用担心你的英文不好，也可以用“#ff00ff”这样的格式），方向为向上滚动。其实你也可以选择向左滚动，只要把"up"改成"left"就行了。但是不支持向右和向下滚动，所以不用尝试"right"和"down"——其实要实现这两个方向也很容易，不过个人觉得不太实用，所以就没做了——每滚动1px的延迟时间为10ms，也就是理想状态下是每秒钟滚动100px。每滚动20px暂停一次，每次暂停的时间是2秒。并且支持鼠标悬停。

上面提到的参数的排列顺序是必须严格遵守的，也就是说得按照下面的顺序来排列。如果你想偷懒，可以使用逗号略过：

复制代码代码如下:1、图层的ID，必须的参数，不填或者拼写错误将会报错；

2、滚动区域的宽度，默认值是200px，所有的默认值都可以在scrollingAD里面修改；

3、滚动区域的高度，默认值是50px；

4、背景颜色，默认值是"transparent"，也就是透明啦；

5、方向，可选值"up/left"；

6、每滚动1px的延迟时间，默认值20，单位是ms——这个值越大滚动越慢；

7、每滚动限定距离后停滞的时间，单位也是ms，默认值2000，也就是2秒啦——如果你不想停滞的话，把它设为0就行了；

8、每两次停滞之间滚动的距离，默认值是一屏。也就是说如果你设定的方向是"up"的话，默认值即等于滚动区域的高度，反之方向为"left"，则默认值为滚动区域的宽度；

9、是否悬停，默认是true，这个你不填也没关系；

第二种方法是这样的：

复制代码代码如下:varsampleDiv=newscrollingAD("divId");

sampleDiv.move();

这样使用的全部都是默认值，不过你应该会觉得必须改掉某个参数才行，那你可以这样：

varsampleDiv=newscrollingAD("divId");

sampleDiv.width=500;

sampleDiv.height=100;

sampleDiv.bgColor="red";

sampleDiv.direction="left";

sampleDiv.delay=10;

sampleDiv.pauseTime=1000;

sampleDiv.size=50;

sampleDiv.isHover=false;

sampleDiv.move();

当然你不需要像上面这样全部写出来，你只要修改必要的参数就行了。如果你使用了第一种方法来创建滚动区域，但是又在后面用这种方式修改过了，则以后面的为准。

需要注意的是，你应该使用这样的顺序来建立这个滚动区域：

效果演示建立图层当然你不需要像上面这样全部写出来，你只要修改必要的参数就行了。如果你使用了第一种方法来创建滚动区域，但是又在后面用这种方式修改过了，则以后面的为准。然后调用脚本文件 function scrollingAD(_id, _width, _height, _bgColor, _direction, _delay, _pauseTime, _size, _isHover) { this.id = _id; this.width = _width; this.height = _height; this.bgColor = _bgColor; this.direction = _direction; this.delay = _delay; this.pauseTime = _pauseTime; this.size = _size; this.object = null; this.isMove = true; if((this.id == "") || (this.id == null)) { alert("必须输入对象的 ID 才能创建滚动区域！"); this.isMove = false; return false; } if(document.getElementById(this.id)) { this.object = document.getElementById(this.id); } else { window.alert("滚动区域创建失败！n请确认 " + this.id + " 是否拼写错误。"); this.isMove = false; return false; } } scrollingAD.prototype.checkNumber = function(_attribute, defaultValue) { if(isNaN(_attribute)) { return defaultValue; } else { return ((typeof(parseInt(_attribute)) == "number") ? parseInt(_attribute) : defaultValue); } } scrollingAD.prototype.move = function() { if(this.isMove == false) return false; var defaultWidth = 200; var defaultHeight = 50; var defaultDelay = 20; var defaultPauseTime = 2000; var defaultIsHover = true; var defaultBgColor = "transparent"; var defaultDirection = "up"; this.width = this.checkNumber(this.width, defaultWidth); this.height = this.checkNumber(this.height, defaultHeight); this.delay = this.checkNumber(this.delay, defaultDelay); this.pauseTime = this.checkNumber(this.pauseTime, defaultPauseTime); this.isHover = (typeof(this.isHover) == "boolean") ? this.isHover : defaultIsHover; if(this.direction == "left") { this.size = this.checkNumber(this.size, this.width); } else { this.size = this.checkNumber(this.size, this.height); } if((this.bgColor == null) || (typeof(this.bgColor) == undefined)) { this.bgColor = defaultBgColor; } else { this.bgColor = this.bgColor; } if((this.direction == null) || (typeof(this.direction) == undefined)) { this.direction = defaultDirection; } else { this.direction = (this.direction.search(/(^up$)|(^left$)/gi) != -1) ? this.direction.toLowerCase() : defaultDirection; } // 创建滚动区域； with(this.object) { style.display = "block"; style.width = this.width + "px"; style.height = this.height + "px"; style.overflow = "hidden"; style.backgroundColor = this.bgColor; } if(this.direction == "up") { this.object.innerHTML = "" + this.object.innerHTML + "" + "" + this.object.innerHTML + ""; } else { this.object.innerHTML = "" + this.object.innerHTML + "" + "" + this.object.innerHTML + ""; } if(document.getElementById(this.id)) { var evalString; if(this.direction == "up") { evalString = "scrollToUp("" + this.id + "", " + this.isHover + ", " + this.delay + ", " + this.size + ", " + this.pauseTime + ", 0) "; } else { evalString = "scrollToLeft("" + this.id + "", " + this.isHover + ", " + this.delay + ", " + this.size + ", " + this.pauseTime + ", 0) "; } eval(evalString); } else { return false; } function pixelToNum(_string) { //该函数用于去掉数值后面的px，并将之转化为数字。 if(_string.slice(_string.length - 2) == "px") { return parseInt(_string.slice(0, (_string.length - 2))); } else { return _string; } } function scrollToLeft(_id, _isHover, _delay, _size, _pauseTime, _s) { var obj = document.getElementById(_id); var mirror = document.getElementById(_id + "_mirror"); if(_size*(1 + parseInt(_s)) + pixelToNum(mirror.style.marginLeft) >= 0) { var evalString =_id + "_timer = window.setTimeout(function() {scrollToLeft("" + _id + "", " + _isHover + ", " + _delay + ", " + _size + ", " + _pauseTime + ", " + _s + ");}, " + _delay + ")"; if(_isHover) { mirror.onmouseover = function() {document.getElementById(_id + "_isHover").value = 0;} mirror.onmouseout = function() {document.getElementById(_id + "_isHover").value = 1;} var step = parseInt(document.getElementById(_id + "_isHover").value); mirror.style.marginLeft = (pixelToNum(mirror.style.marginLeft) - step) + "px"; eval("var " + evalString); } else { mirror.style.marginLeft = (pixelToNum(mirror.style.marginLeft) - 1) + "px"; eval("var " + evalString); } } else { if(mirror.offsetWidth + pixelToNum(mirror.style.marginLeft) >= 0) { _s += 1; window.setTimeout(function() {scrollToLeft(_id, _isHover, _delay, _size, _pauseTime, _s)}, _pauseTime); } else { mirror.style.marginLeft = mirror.offsetWidth + pixelToNum(mirror.style.marginLeft) + "px";; window.setTimeout(function() {scrollToLeft(_id, _isHover, _delay, _size, _pauseTime, 0)}, _pauseTime); } } } function scrollToUp(_id, _isHover, _delay, _size, _pauseTime, _s) { var obj = document.getElementById(_id); var mirror = document.getElementById(_id + "_mirror"); if(_size*(1 + parseInt(_s)) + pixelToNum(mirror.style.marginTop) >= 0) { var evalString =_id + "_timer = window.setTimeout(function() {scrollToUp("" + _id + "", " + _isHover + ", " + _delay + ", " + _size + ", " + _pauseTime + ", " + _s + ");}, " + _delay + ")"; if(_isHover) { mirror.onmouseover = function() {document.getElementById(_id + "_isHover").value = 0;} mirror.onmouseout = function() {document.getElementById(_id + "_isHover").value = 1;} var step = parseInt(document.getElementById(_id + "_isHover").value); mirror.style.marginTop = (pixelToNum(mirror.style.marginTop) - step) + "px"; eval("var " + evalString); } else { mirror.style.marginTop = (pixelToNum(mirror.style.marginTop) - 1) + "px"; eval("var " + evalString); } } else { if(mirror.offsetHeight + pixelToNum(mirror.style.marginTop) >= 0) { _s += 1; window.setTimeout(function() {scrollToUp(_id, _isHover, _delay, _size, _pauseTime, _s)}, _pauseTime); } else { mirror.style.marginTop = mirror.offsetHeight + pixelToNum(mirror.style.marginTop) + "px";; window.setTimeout(function() {scrollToUp(_id, _isHover, _delay, _size, _pauseTime, 0)}, _pauseTime); } } } } 最后建立滚动区域

如果脚本报错，可能是因为我的网站速度连接太慢的原因，只要刷新一下页面就行了。

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]提示：您可以先修改部分代码再运行

更新：

现在可以使用百分比来定义size参数了，像这样：

varsampleDiv=newscrollingAD("sampleDiv");

sampleDiv.size="50%";//注意，一定要加引号，否则会出错。

sampleDiv.move();

得到的效果就是一个循环只滚动两次，同理一次滚完一个循环的话，将size设置为"100%"就行了。不过不建议随意设置百分比，请尽量设置成与行数相符的数值，否则可能出现意外的空白。

当然，仍然支持数字：）