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()