js 图片滚动

左右跑
<div align="center">
<div id=demo style=overflow:hidden;height:33;width:50;>
<table align=left cellpadding=0 cellspace=0 border=0>
<tr>
<td id=demo1 valign=top>
显示的内容放在这里 </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.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script></div>


注:显示的内容必须要比 DIV (demo) 的宽度要宽








上下跑
<DIV   id=marquees> 
                                                  <table   width="135"   border="1" height="95" style="border-width: 0px"> 
                                                      <tr> 
                                                          <td style="border-style: none; border-width: medium">这里为需要滚动的图片</td> 
                                                      </tr> 
                                                  </table> 
                                              </DIV> 
                                      <SCRIPT> 
  
  marqueesHeight=870; // 滚动高度
  stopscroll=false; 
  with(marquees){ 
  noWrap=true; 
  style.width=0; 
  style.height=marqueesHeight; 
  style.overflowY="hidden"; 
  
  onmouseover=new   Function("stopscroll=true"); 
  onmouseout=new   Function("stopscroll=false"); 
  } 
  document.write('<div   id="templayer"   style="position:absolute;z-index:1;visibility:hidden"></div>'); 
  
  function   init(){ 
  while(templayer.offsetHeight<marqueesHeight){ 
  templayer.innerHTML+=marquees.innerHTML; 
  } 
  marquees.innerHTML=templayer.innerHTML+templayer.innerHTML; 
  setInterval("scrollUp()",10);  //注:这里为滚动的速度 数字越大滚动越慢
  } 
  document.body.onload=init; 
  
  preTop=0; 
  
  function   scrollUp(){ 
  if(stopscroll==true)   return; 
  preTop=marquees.scrollTop; 
  marquees.scrollTop+=1; 
  
  if(preTop==marquees.scrollTop){ 
  marquees.scrollTop=templayer.offsetHeight-marqueesHeight+1; 
  } 
  } 
  --> 
  </SCRIPT>

你可能感兴趣的:(图片滚动)