图片无缝上下滚动

时间:2022-05-12
本文章向大家介绍图片无缝上下滚动,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

今天要用到图片无缝滚动,在网上找了半天要么不能滚动,要么不能无缝。我最后找到了一个可以达到要求的代码,现在贴出来放便大家使用。我测试过的,可以使用。

<div id=demo style=”overflow:hidden; width:475; height:80px;”> 
 <div id=demo1> 
 <a href=”#” charset=”utf-8″ target=”_blank”><img src=”images/ad1.jpg”></a>
 <br>
 <img src=”images/ad2.jpg”>
 <br>
 <img src=”images/ad1.jpg”>
 <br>
 </div> 
 <div id=demo2></div> 
 </div> 
 <script language=”javascript”> 
 var speed=20
 document.getElementById(“demo2”).innerHTML=document.getElementById(“demo1”).innerHTML 
 function Marquee(){ 
 if(document.getElementById(“demo2”).offsetTop-document.getElementById(“demo”).scrollTop<=0) 
 document.getElementById(“demo”).scrollTop-=document.getElementById(“demo1”).offsetHeight 
 else{ 
 document.getElementById(“demo”).scrollTop++ 
 } 
 } 
 var MyMar=setInterval(Marquee,speed) 
 document.getElementById(“demo”).onmouseover=function() {clearInterval(MyMar)} 
 document.getElementById(“demo”).onmouseout=function() {MyMar=setInterval(Marquee,speed)} 
 </script>