欢迎来到酷云建站平台,全网营销云系统加盟中心!

海量企业网站模板 · 任您选择

美出特色,精出品质,一切为了企业更好的营销

隐藏侧栏
Beta
转载

js 无间断滚动切换效果

       幻灯片和轮播图     2015-08-05     eycms     67     0    

<!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>


--结束END--

本文链接: http://www.83703228.cn/resources/slide/68.html (转载时请注明来源链接)

 
本文标签: 全部

下班PC阅读不方便?

手机也可以随时学习开发

微信关注公众号“酷云”
"酷云平台前端开发教学"
每日干货技术分享
 

×

成为 酷云平台 代理商!

关注

微信
关注

微信扫一扫
获取最新优惠信息

酷云平台公众号

客服

联系
客服

很高兴为您服务
尊敬的用户,欢迎您咨询,我们为新用户准备了优惠好礼。 咨询客服

联系客服:

在线QQ: 3206174

客服电话: 0516-83703228

售前咨询 售后服务
在线交谈 智能小云

工作时间:

周一至周五: 09:00 - 17:00

WAP

手机
访问

移动端访问
手机上也能选模板

酷云平台手机端