徐州酷优网络 徐州网站建设优选品牌!开启企业建站营销新时代  站长学院 Loading
热线:0516-83703228
您现在的位置:首页 > 站长学院 > 建站资讯 > 建站、设计教程 > 滚动

js 横向带停顿图片滚动效果代码

作者:eycms 日期:2016-02-16 17:53:38 人气:14

  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 

<title>js 横向带停顿图片滚动</title> 

</head> 

<script> 

function Marquee(){ 

this.ID=document.getElementById(arguments[0]); 

this.Direction=arguments[1]; 

this.Step=arguments[2]; 

this.Width=arguments[3]; 

this.Height=arguments[4]; 

this.Timer=arguments[5]; 

this.WaitTime=arguments[6]; 

this.StopTime=arguments[7]; 

if(arguments[8]){this.ScrollStep=arguments[8];}else{this.ScrollStep=this.Direction>1?this.Width:this.Height;} 

this.CTL=this.StartID=this.Stop=this.MouseOver=0; 

this.ID.style.overflowX=this.ID.style.overflowY="hidden"; 

this.ID.noWrap=true; 

this.ID.style.width=this.Width; 

this.ID.style.height=this.Height; 

this.ClientScroll=this.Direction>1?this.ID.scrollWidth:this.ID.scrollHeight; 

this.ID.innerHTML+=this.ID.innerHTML; 

this.Start(this,this.Timer,this.WaitTime,this.StopTime); 

Marquee.prototype.Start=function(msobj,timer,waittime,stoptime){ 

msobj.StartID=function(){msobj.Scroll();} 

msobj.Continue=function(){ 

if(msobj.MouseOver==1){setTimeout(msobj.Continue,waittime);} 

else{clearInterval(msobj.TimerID); msobj.CTL=msobj.Stop=0; msobj.TimerID=setInterval(msobj.StartID,timer);} 

msobj.Pause=function(){msobj.Stop=1; clearInterval(msobj.TimerID); setTimeout(msobj.Continue,waittime);} 

msobj.Begin=function(){ 

msobj.TimerID=setInterval(msobj.StartID,timer); 

msobj.ID.onmouseover=function(){msobj.MouseOver=1; clearInterval(msobj.TimerID);} 

msobj.ID.onmouseout=function(){msobj.MouseOver=0; if(msobj.Stop==0){clearInterval(msobj.TimerID); msobj.TimerID=setInterval(msobj.StartID,timer);}} 

setTimeout(msobj.Begin,stoptime); 

Marquee.prototype.Scroll=function(){ 

switch(this.Direction){ 

case 0: 

this.CTL+=this.Step; 

if(this.CTL>=this.ScrollStep&&this.WaitTime>0){this.ID.scrollTop+=this.ScrollStep+this.Step-this.CTL; this.Pause(); return;} 

else{if(this.ID.scrollTop>=this.ClientScroll) this.ID.scrollTop-=this.ClientScroll; this.ID.scrollTop+=this.Step;} 

break; 

case 1: 

this.CTL+=this.Step; 

if(this.CTL>=this.ScrollStep&&this.WaitTime>0){this.ID.scrollTop-=this.ScrollStep+this.Step-this.CTL; this.Pause(); return;} 

else{if(this.ID.scrollTop<=0) this.ID.scrollTop+=this.ClientScroll; this.ID.scrollTop-=this.Step;} 

break; 

case 2: 

this.CTL+=this.Step; 

if(this.CTL>=this.ScrollStep&&this.WaitTime>0){this.ID.scrollLeft+=this.ScrollStep+this.Step-this.CTL; this.Pause(); return;} 

else{if(this.ID.scrollLeft>=this.ClientScroll) this.ID.scrollLeft-=this.ClientScroll; this.ID.scrollLeft+=this.Step;} 

break; 

case 3: 

this.CTL+=this.Step; 

if(this.CTL>=this.ScrollStep&&this.WaitTime>0){this.ID.scrollLeft-=this.ScrollStep+this.Step-this.CTL; this.Pause(); return;} 

else{if(this.ID.scrollLeft<=0) this.ID.scrollLeft+=this.ClientScroll; this.ID.scrollLeft-=this.Step;} 

break; 

</script> 

<body> 

<nobr> 

<div id="marqueediv8" style="width:760px;height:52px;overflow:hidden;"> 

<img  src="img/001.jpg" width="150" height="50"> 

<img  src="img/002.jpg" width="150" height="50"> 

<img  src="img/003.jpg" width="150" height="50"> 

<img  src="img/004.jpg" width="150" height="50"> 

<img  src="img/005.jpg" width="150" height="50"> 

<img  src="img/001.jpg" width="150" height="50"> 

<img  src="img/002.jpg" width="150" height="50"> 

<img  src="img/003.jpg" width="150" height="50"> 

<img  src="img/004.jpg" width="150" height="50"> 

<img  src="img/005.jpg" width="150" height="50"> 

<img  src="img/001.jpg" width="150" height="50"> 

<img  src="img/002.jpg" width="150" height="50"> 

<img  src="img/003.jpg" width="150" height="50"> 

<img  src="img/004.jpg" width="150" height="50"> 

</div> 

</nobr> 

<script> 

window.onload=function(){ 

new Marquee( 

"marqueediv8", //容器ID<br /> 

2, //向上滚动(0向上 1向下 2向左 3向右)<br /> 

20, //滚动的步长<br /> 

760, //容器可视宽度<br /> 

52, //容器可视高度<br /> 

50, //定时器 数值越小,滚动的速度越快(1000=1秒,建议不小于20)<br /> 

1000, //间歇停顿时间(0为不停顿,1000=1秒)<br /> 

1000, //开始时的等待时间(0为不等待,1000=1秒)<br /> 

152//间歇滚动间距(可选)<br /> 

); 

}; 

</script> 

</body> 

</html></td>

 </tr>

</table>


回到顶部