不间断连续图片滚动效果(JavaScript实现)

直接看代码:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <div id="demo" style="overflow:hidden;height:320px;width:240px;background:#214984;color:#ffffff"> <div id="demo1"> <!-- 定义图片 --> <img src="a1337810.jpg" mce_src="a1337810.jpg" width="240" height="320" /> <img src="a1337811.jpg" mce_src="a1337811.jpg" width="240" height="320" /> <img src="a1337815.jpg" mce_src="a1337815.jpg" width="240" height="320" /> <img src="a1337816.jpg" mce_src="a1337816.jpg" width="240" height="320" /> </div> <div id=demo2> </div> </div> <mce:script type="text/javascript"><!-- var speed=30; demo2.innerHTML=demo1.innerHTML; function Marquee(){ if(demo2.offsetTop-demo.scrollTop<=0) demo.scrollTop-=demo1.offsetHeight; else{ demo.scrollTop++; } } var MyMar=setInterval(Marquee,speed); demo.onmouseover=function() {clearInterval(MyMar)}; demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}; // --></mce:script> </body> </html>

 

你可能感兴趣的:(JavaScript,function,div)