请问：js 实现平滑滚动字幕

请教：js 实现平滑滚动字幕
想实现公告文字循环从右滚到左，用HTML自带的标签<marguee>，滚动很闪，看不清，而且鼠标移过去不能停止

[解决办法]
3点说明：
1.marquee标签可以设置使得鼠标移过去，停止
如：

HTML code

<marquee onmouseout="this.start()" onmouseover="this.stop()">用来设置鼠标移出该区域时继续滚动</marquee>
[解决办法]
HTML code
<style>#s{ width:500px; border:1px solid #000; overflow:hidden;}#s div{ width:1000px;}#s #i span{ width:500px; display:block; float:left;}</style><div id="s"><div id="i"><span id="t">要滚动的文字，滚啊滚，滚啊滚</span></div></div><script type="text/javascript">var speed = 10var s = document.getElementById("s")var i = document.getElementById("i")var t = document.getElementById("t")i.appendChild(t.cloneNode(true))function scroll(){     s.scrollLeft += 1     if(s.scrollLeft >= t.offsetWidth) s.scrollLeft = 0;}window.setInterval(scroll,speed)</script>
[解决办法]
HTML code
<style>#s{ width:500px; border:1px solid #000; overflow:hidden;}#s div{ width:1000px;}#s #i span{ width:500px; display:block; float:left;}</style><div id="s"><div id="i"><span id="t">要滚动的文字，滚啊滚，滚啊滚</span></div></div><script type="text/javascript">var speed = 10var s = document.getElementById("s")var i = document.getElementById("i")var t = document.getElementById("t")var d i.appendChild(t.cloneNode(true))function scroll(){     s.scrollLeft += 1     if(s.scrollLeft >= t.offsetWidth) s.scrollLeft = 0;}d = window.setInterval(scroll,speed)s.onmouseover = function(){window.clearInterval(d)}s.onmouseout = function(){d = window.setInterval(scroll,speed)}</script>
[解决办法]
探讨

楼上：如果要滚动的内容比较长，怎么使它在一行内滚动呢，怎么设置css

[解决办法]
自己做的一个走马灯组件：
JScript code
window.XX = window.XX || {};XX.Fx =  XX.Fx || {};/*走马灯构造函数；参数elem:要进行包装的dom元素，即包装后，其内部元素会实现走马灯效果opts:JSON格式的数据，可传入的参数包括:    {       speed //滚动速度，以毫秒为单位，默认为1000       step //滚动像素，    默认为5       direction //滚动方向，包括'left', 'right', 'top', 'bottom'，默认'left'    }*/XX.Fx.Marquee = function(elem, opts){    opts = opts || {};    this.el = elem;    this.speed = opts.speed || 1000;    this.step  = opts.step || 5;    var dir = this.direction = opts.direction || 'left';        if( dir !== 'left' && dir !== 'right' && dir !== 'top' && dir !== 'bottom') {        throw new Error('Constructor "XX.Fx.Marquee": direction of options must be "left","right","top","bottom"');        }        elem.style.overflow = 'hidden';    elem.style.whiteSpace = 'nowrap';    if(dir === 'right' || dir === 'bottom'){        this.step = - this.step ;        }     this.Offset = (dir === 'left' || dir === 'right') ? 'scrollLeft' : 'scrollTop';    this.size   = parseInt((dir === 'left' || dir === 'right') ? elem.scrollWidth : elem.scrollHeight);};XX.Fx.Marquee.prototype.start = function(){    if(this.timer){        clearTimeout(this.timer);        }            this.el.innerHTML += this.el.innerHTML;    var that = this, speed = this.speed, step = this.step, offset = this.Offset, el = this.el, size = this.size, move = null;    switch (this.direction){        case 'right':        case 'bottom':            move =     function(){                if(el[offset] > 0){                    el[offset] += step;                    setTimeout(move, speed)                } else{                    el[offset] = that.size;                    setTimeout(move, speed)                    }                };                break;        default:            move =     function(){                if(el[offset] < size){                    el[offset] += step;                    setTimeout(move, speed)                } else{                    el[offset] = 0;                    setTimeout(move, speed)                    }                };        }    this.timer = setTimeout(move, speed);};XX.Fx.Marquee.prototype.stop = function(){    clearTimeout(this.timer);    };