修改一个JS滚动的效果的修改


大家运行这个代码可以看到滚动和停留是正常的。但是停留的时候确不是我想要的。比如滚动到“间断-4-caiying2007 间断-5-caiying2007 间断-6-caiying2007“的时候，到停留的时候却变成了 ”间断-2-caiying2007 间断-3-caiying2007 间断-4-caiying2007“ 请高手修改一下。让滚动和停留正常。
最好注释写的详细点 我JS不好也想学习一下。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>间断滚动_www.jb51.net_脚本之家</title> 
<style> 
#Marquee{ height:60px; overflow:hidden;} 
#Marquee div{ border:1px solid #DDD3FE; background:#EEECF4; height:58px;} 
</style> 
</head> 
<body> 
<div id="Marquee"> 
<li style="width: 160px; height: 10px">间断-1-caiying2007</li> 
<li style="width: 160px; height: 10px">间断-2-caiying2007</li> 
<li style="width: 160px; height: 10px">间断-3-caiying2007</li> 
<li style="width: 160px; height: 10px">间断-4-caiying2007</li> 
<li style="width: 160px; height: 10px">间断-5-caiying2007</li> 
<li style="width: 160px; height: 10px">间断-6-caiying2007</li> 
<li style="width: 160px; height: 10px">间断-7-caiying2007</li> 
<li style="width: 160px; height: 10px">间断-8-caiying2007</li> 
<li style="width: 160px; height: 10px">间断-9-caiying2007</li> 
<li style="width: 160px; height: 10px">间断-10-caiying2007</li> 
<li style="width: 160px; height: 10px">间断-2-caiying2007</li> 
<li style="width: 160px; height: 10px">间断-3-caiying2007</li> 
</div> 
<script> 
var Mar = document.getElementById("Marquee"); 
var child_div=Mar.getElementsByTagName("li") 
var picH = 60;//移动高度 
var scrollstep=1;//移动步幅,越大越快 
var scrolltime=20;//移动频度(毫秒)越大越慢 
var stoptime=3000;//间断时间(毫秒) 
var tmpH = 0; 
Mar.innerHTML += Mar.innerHTML; 
function start(){ 
if(tmpH < picH){ 
tmpH += scrollstep; 
if(tmpH > picH )tmpH = picH ; 
Mar.scrollTop = tmpH; 
setTimeout(start,scrolltime); 
}else{ 
tmpH = 0; 
Mar.appendChild(child_div[0]); 
Mar.scrollTop = 0; 
setTimeout(start,stoptime); 
} 
} 
onload=function(){setTimeout(start,stoptime)}; 
</script></body> 
</html> 

解决方案 »

  1.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>间断滚动_www.jb51.net_脚本之家</title> 
    <style> 
    #Marquee{ height:60px; overflow:hidden;} 
    #Marquee div{ border:1px solid #DDD3FE; background:#EEECF4; height:58px;} 
    </style> 
    </head> 
    <body> 
    <div id="Marquee"> 
    <li style="width: 160px; height: 20px">间断-1-caiying2007</li> 
    <li style="width: 160px; height: 20px">间断-2-caiying2007</li> 
    <li style="width: 160px; height: 20px">间断-3-caiying2007</li> 
    <li style="width: 160px; height: 20px">间断-4-caiying2007</li> 
    <li style="width: 160px; height: 20px">间断-5-caiying2007</li> 
    <li style="width: 160px; height: 20px">间断-6-caiying2007</li> 
    <li style="width: 160px; height: 20px">间断-7-caiying2007</li> 
    <li style="width: 160px; height: 20px">间断-8-caiying2007</li> 
    <li style="width: 160px; height: 20px">间断-9-caiying2007</li> 
    <li style="width: 160px; height: 20px">间断-10-caiying2007</li> 
    <li style="width: 160px; height: 20px">间断-2-caiying2007</li> 
    <li style="width: 160px; height: 20px">间断-3-caiying2007</li> 
    </div> 
    <script> 
    var Mar = document.getElementById("Marquee"); 
    var child_div = Mar.getElementsByTagName("li") 
    var picH = 60; //移动高度 
    var itemH = 20; //每项高度
    var scrollstep = 1;//移动步幅,越大越快 
    var scrolltime = 20;//移动频度(毫秒)越大越慢 
    var stoptime = 3000;//间断时间(毫秒) 
    var tmpH = 0; 
    Mar.innerHTML += Mar.innerHTML; 
    function start(){ 
    if(tmpH < picH){ 
    tmpH += scrollstep; 
    if(tmpH > picH )tmpH = picH ; 
    Mar.scrollTop = tmpH; 
    setTimeout(start, scrolltime); 
    }else{ 
    tmpH = 0; 
    for(var i=0; i< parseInt(picH / itemH); i++)
    Mar.appendChild(Mar.getElementsByTagName("li")[0]); 
    Mar.scrollTop = 0;

    setTimeout(start, stoptime); 
    } 
    } 
    window.onload = function(){
    setTimeout(start, stoptime)
    }; 
    </script>
    </body> 
    </html> 
      

  2.   

    改的有点面目全非了,不过你那个东西在我本机上根本就执行不了
    <style type="text/css">
    #Marquee{ height:60px; width:270px; overflow:hidden; border:1px solid #000000} </style> 
    <body> 
    <div id="Marquee"> 
    <li style="width: 260px; height: 20px">间断-1-caiying2007</li> 
    <li style="width: 260px; height: 20px">间断-2-caiying2007</li> 
    <li style="width: 260px; height: 20px">间断-3-caiying2007</li> 
    <li style="width: 260px; height: 20px">间断-4-caiying2007</li> 
    <li style="width: 260px; height: 20px">间断-5-caiying2007</li> 
    <li style="width: 260px; height: 20px">间断-6-caiying2007</li> 
    <li style="width: 260px; height: 20px">间断-7-caiying2007</li> 
    <li style="width: 260px; height: 20px">间断-8-caiying2007</li> 
    <li style="width: 260px; height: 20px">间断-9-caiying2007</li> 
    <li style="width: 260px; height: 20px">间断-10caiying2007</li> 
    <li style="width: 260px; height: 20px">间断-1-caiying2007</li> 
    <li style="width: 260px; height: 20px">间断-2-caiying2007</li> 
    <li style="width: 260px; height: 20px">间断-3-caiying2007</li> 
    <li style="width: 260px; height: 20px">间断-4-caiying2007</li> 
    <li style="width: 260px; height: 20px">间断-5-caiying2007</li> 
    <li style="width: 260px; height: 20px">间断-6-caiying2007</li> 
    </div> 
    <script> 
    function move(){
    if(document.getElementById("Marquee").scrollTop==10*20)
    {document.getElementById("Marquee").scrollTop=0}
    else
    {document.getElementById("Marquee").scrollTop=document.getElementById("Marquee").scrollTop+1 //步长为1
    }
    setTimeout("move()",10)//10毫秒执行一次函数
    }
    move()
    </script>