无缝滚动一次就完了，怎么回事啊？
无缝滚动一次就完了，怎么回事啊？
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>信息无缝滚动！</title>
<!-- <meta http-equiv="refresh" content="2"> -->
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
.message{
width: 300px;
border:8px solid gray;
line-height: 24px;
border-radius: 10px;
position: relative;
margin: 20px auto;
box-shadow: 1px 2px 4px gray;
font-size: 14px;
}
h3{
background-color: #E25162;
font-size: 26px;
color: #fff;
height: 62px;
line-height: 62px;
padding-left: 30px;
}
span{
position: absolute;
right: 6px;
top:17px;
color: #fff;
}
ol{
padding:10px 0 5px 26px;
}
#show{
height: 116px;
overflow: hidden;
}
li:hover{
color: red;
}
</style>
</head>
<body>
<div>
<h3>最新课程</h3>
<span>more>></span>
<div id="show">
<ol id="ul0">
<li>IIIIIIIIIIIIIIIIIIIII</li>
<li>lovelovelovelove</li>
<li>youyouyouyouyouyou</li>
<li>zhuyanzhuyanzhuyan</li>
</ol>
<ol id="ul1"></ol>
</div>
</div>
<script type="text/javascript">
var box=document.getElementById("show");
var mes1 = document.getElementById("ul0");
var mes2 = document.getElementById("ul1");
var speed = 50;
mes2.innerHTML=mes1.innerHTML;
function up(){
if(box.scrollTop == mes1.scrollHeight){
box.scrollTop=0;
}else{
box.scrollTop ++;
}
}
var i=setInterval("up()",speed);
box.onmouseover=function (){
clearInterval(i);
}
box.onmouseout=function(){
i=setInterval("up()",speed);//一定要赋值给变量i，否则会引起两次调用计时器。
}
</script>
</body>
</html>
