信息轮换播放-JS特效-爱易网页

信息轮换播放

日期：2014-05-18　浏览次数：20257 次

以下是HTML网页特效代码，点击运行按钮可查看效果：

以下是程序代码

<!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>无间断滚动切换效果</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>
<div id="s1" class="scroll">北 京|上 海|广 州|西 安|南 京|大 连|哈尔滨|武 汉</div>
</body>
</html></font>
<a href="http://js.aiyiweb.com/">欢迎访问爱易网网页特效代码站，js.aiyiweb.com</a>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]