<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w.cn/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.xx.cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无间断滚动切换效果</title>
<style type="text/css" media="all">
.scroll{
height:20px;
overflow:hidden;
font-size:12px;
line-height:20px;
border:#A5A5A5 1px dotted;
width:120px;
margin:0px auto;
text-align:center;
}
</style>
<script language="javascript" type="text/javascript">
var s,sn=0,timer,slen,timer2;
function scrollInit(){
s=getid("s1");
s.scrollTop=0;
slen=s.innerHTML.split("|");
s.innerHTML="";
for(var i=0;i<slen.length;i++){s.innerHTML+=(slen[i]+"<br />");}
s.innerHTML+=slen[0];
timer2=setInterval(scrollstart,3000);
s.onmouseover=function(){clearInterval(timer2);clearInterval(timer);s.style.backgroundColor="#ccc";}
s.onmouseout=function(){timer2=setInterval(scrollstart,3000);s.style.backgroundColor="#fff";}
}
function scrollstart(){
if(s.scrollTop>=(slen.length*20)){s.scrollTop=0;}
timer=setInterval(scrollexec,30);
}
function scrollexec(){
if(sn<20){
sn++;
s.scrollTop++;
}else{
sn=0;
clearInterval(timer);
}
}
function getid(id){return document.getElementById(id);}
window.onload=scrollInit;
</script>
</head>
<body>