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

请教：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 = 10
var 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 = 10
var 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);    
};