第一种：
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>循环滚动</title>
<!--CSS/JS-->
<style type="text/css">
*{margin:0;padding:0;}
#scrollBox{height:150px;width:300px;margin:100px auto;background: #DBE4E8;overflow:hidden;}
#scrollBox #con1,#con2{width:280px;float:left;}
#scrollBox li{height:15px;line-height:15px;text-align:center;}
</style>
</head>
<body>
<!--div-->
<div id="scrollBox">
<ul id="con1">
<li>11111！！<li>
<li>22222！！<li>
<li>33333！！<li>
<li>44444！！<li>
<li>55555！！<li>
<li>66666！！<li>
<li>77777！！<li>
<li>88888！！<li>
<li>99999！！<li>
</ul>
<ul id="con2"></ul>
</div>
<script type="text/javascript">
var area =document.getElementById('scrollBox');
var con1 = document.getElementById('con1');
var con2 = document.getElementById('con2');
con2.innerHTML=con1.innerHTML;
function scrollUp(){
if(area.scrollTop>=con1.offsetHeight){
area.scrollTop=0;
}else{
area.scrollTop++
}
}
var time = 50;
var mytimer=setInterval(scrollUp,time);
area.onmouseover=function(){
clearInterval(mytimer);
}
area.onmouseout=function(){
mytimer=setInterval(scrollUp,time);
}
</script>
</body>
</html>
第二种：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>文字循环显示</title>
<script type="text/javascript">
var str="今天中午开会，地点是五楼会议室！";
var loopDisplay=function()
{
txt.value=str;
str=str.substring(1,str.length)+str.substring(0,1); //重新拼接字符串
setTimeout(loopDisplay,400); //定式刷新 产生滚动显示效果
}
</script>
<style type="text/css">
p input{
display:block;
margin:0 auto;
margin-top:100px;
width:300px;
height:50px;
font-size:20px;
border:2px solid #666;
border-radius:5px;
box-shadow:0px 0px 10px #0000FF;}
</style>
</head>
<body onLoad="loopDisplay()">
<p><input id="txt" type="text"></p>
</body>
</html>