js实现内容滚动效果

首先说下实现内容滚动效果的思路：在一块区域内实现内容滚动效果，要求内容轮播，那么如何实现轮播呢？我们将原内容复制一份放置其后面，当原内容滚动完成（即父层scrollTop等于原内容区高度时），我们将父层scrollTop设置为0，此时又从原内容开始滚动。如果浏览者想看内容时，但内容一直再滚动怎么办呢？我们可以通过设置onmouseover事件来控制，当用户把鼠标悬停至内容区时，停止滚动；当鼠标移开时，继续滚动。

以下是代码部分：

html代码：
<div class="scroll" id="scroll">
        <div id="inner1">
            <p>1好好学习天天向上!</p>
            <p>2好好学习天天向上!</p>
            <p>3好好学习天天向上!</p>
            <p>4好好学习天天向上!</p>
            <p>5好好学习天天向上!</p>
            <p>6好好学习天天向上!</p>
            <p>7好好学习天天向上!</p>
            <p>8好好学习天天向上!</p>
        </div>
        <div id="inner2"></div>
    </div>

css样式：
        ul,li,p{margin:0;padding:0;list-style: none}
        body{padding:20px;}
        .scroll{
            line-height:28px;
            border:2px dashed #666;
            padding:0 20px;
            height:112px;
            overflow:hidden;
            background-color:#f1f1f1;
        }

js代码：
function srcoll(){
        var _scroll = document.getElementById("scroll"),
            _inner1 = document.getElementById("inner1"),
            _inner2 = document.getElementById("inner2"),
            speed = 20;
        _inner2.innerHTML = _inner1.innerHTML;
        function marquee(){
            if(_inner1.offsetHeight<=_scroll.scrollTop){
                _scroll.scrollTop = 0
            }else{
                _scroll.scrollTop++;
            }
        }
        var interval = setInterval(marquee,speed);
        _scroll.onmouseover = function(){
            clearInterval(interval);
        }
        _scroll.onmouseout = function(){
            interval = setInterval(marquee,speed);
        }
    }
    srcoll()