不间断连续图片滚动效果的制作方法

<!-- 指向链接图片url -->
<base href=" http://blog.csdn.net/phphot">
<div id=demo style=overflow:hidden;height:150;;background:#214984;color:#ffffff>
<div id=demo1>
<!-- 定义图片 -->
<img src="images/logo_1.gif">
<img src="images/logo/flashempire.gif">
<img src="images/logo.gif">
<img src="images/logo/5dmedia.gif">
<img src="images/logo/macromedia.gif">
<img src="images/logo/sucaiw.gif">
<img src="images/logo/blueieda.gif">
<img src="images/logo/htmlcn.gif">
<img src="images/logo/fwcn.gif">
</div>
<div id=demo2></div>
</div>
<script>
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.οnmοuseοver=function() {clearInterval(MyMar)}
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
&lt;/script>
　　制作向下滚动的效果：
　　将上面“制作向上滚动的效果”中的红色字体Js部分替换成：
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollTop=demo.scrollHeight
function Marquee(){
if(demo1.offsetTop-demo.scrollTop&gt;=0)
demo.scrollTop+=demo2.offsetHeight
else{
demo.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed)
demo.οnmοuseοver=function() {clearInterval(MyMar)}
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
</script>
　　制作向左滚动的效果：
<base href=" http://www.it365cn.com">
<div id=demo style=overflow:hidden;height:33;;background:#214984;color:#ffffff>
<table align=left cellpadding=0 cellspace=0 border=0>
<tr>
<td id=demo1 valign=top><img src="images/logo_1.gif"><img src="images/logo/flashempire.gif"><img src="images/logo.gif"><img src="images/logo/5dmedia.gif"><img src="images/logo/macromedia.gif"><img src="images/logo/sucaiw.gif"><img src="images/logo/blueieda.gif"><img src="images/logo/htmlcn.gif"><img src="images/logo/fwcn.gif">
</td>
<td id=demo2 valign=top></td>
</tr>
</table>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.οnmοuseοver=function() {clearInterval(MyMar)}
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
&lt;/script>
　　制作向右滚动的效果：
　　将上面“制作向左滚动的效果”中的红色字体Js部分替换成：
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollLeft=demo.scrollWidth
function Marquee(){
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth
else{
demo.scrollLeft--
}
}
var MyMar=setInterval(Marquee,speed)
demo.οnmοuseοver=function() {clearInterval(MyMar)}
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
&lt;/script>
　　制作的方法就简单的介绍完成了。
 
<!--连接数据库的不间断连续滚动的图片-->
<div id="marquees">  
  <%set   rs=server.createobject("adodb.recordset")  
  sql="select   *   from   code"  
  rs.open sql,conn,1,1  
  do while not rs.eof  
  %>  
      <a href="javascript:"><%=rs("code_title")%></a><br>  
      <br>  
      <%rs.movenext  
      loop%>  
  </div>    
  <script language="JavaScript">  
   
  marqueesHeight=200;  
  stopscroll=false;  
   
  with(marquees){  
      style.;  
      style.height=marqueesHeight;  
      style.overflowX="visible";  
      style.overflowY="hidden";  
      noWrap=true;  
      οnmοuseοver=new   Function("stopscroll=true");  
      οnmοuseοut=new   Function("stopscroll=false");  
  }  
  document.write('<div   id="templayer"   style="position:absolute;z-index:1;visibility:hidden"></div>');  
   
  preTop=0;   currentTop=0;    
   
  function   init(){  
      templayer.innerHTML="";  
      while(templayer.offsetHeight<marqueesHeight){  
          templayer.innerHTML+=marquees.innerHTML;  
      }  
      marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;  
      setInterval("scrollUp()",20);//越大越慢  
  }  
  document.body.οnlοad=init;  
   
  function   scrollUp(){  
      if(stopscroll==true)   return;  
      preTop=marquees.scrollTop;  
      marquees.scrollTop+=1;  
      if(preTop==marquees.scrollTop){  
          marquees.scrollTop=templayer.offsetHeight-marqueesHeight;  
          marquees.scrollTop+=1;  
      }  
  }  
  &lt;/script>