求用javascript实现图片向左滚动

网上的，供参考1.将下面的插入针代码复制到<body>~</body>里
------------------------------------
<iframe frameborder=no height=100 marginheight=0 marginwidth=0 name=mq scrolling=no src="mq.htm" width="100%"></iframe>
<iframe frameborder=no height=0 marginheight=0 marginwidth=0 name=mq scrolling=no src="mqhx.htm" width=0></iframe>2.将mq.htm 文件放在同级目录下，文件内容如下
------------------------------------
<TABLE border=0 cellPadding=0 cellSpacing=0 align="center">
  <TBODY> 
  <TR>
    <TD width=150><IMG height=100 
      onmouseout=javascript:parent.frames[1].startscroll(); 
      onmouseover=javascript:parent.frames[1].stopscroll(); src="1.jpg" 
      width=150></TD>
    <TD width=150><IMG height=100 
      onmouseout=javascript:parent.frames[1].startscroll(); 
      onmouseover=javascript:parent.frames[1].stopscroll(); src="2.jpg" 
      width=150></TD>
    <TD width=150><IMG height=100 
      onmouseout=javascript:parent.frames[1].startscroll(); 
      onmouseover=javascript:parent.frames[1].stopscroll(); src="3.jpg" 
      width=150></TD>
    <TD width=150><IMG height=100 
      onmouseout=javascript:parent.frames[1].startscroll(); 
      onmouseover=javascript:parent.frames[1].stopscroll(); src="4.jpg" 
      width=150></TD>
    <TD width=150><IMG height=100 
      onmouseout=javascript:parent.frames[1].startscroll(); 
      onmouseover=javascript:parent.frames[1].stopscroll(); src="5.jpg" 
      width=150></TD>
    <TD width=150><IMG height=100 
      onmouseout=javascript:parent.frames[1].startscroll(); 
      onmouseover=javascript:parent.frames[1].stopscroll(); src="6.jpg" 
      width=150></TD>
    <TD width=150><IMG height=100 
      onmouseout=javascript:parent.frames[1].startscroll(); 
      onmouseover=javascript:parent.frames[1].stopscroll(); src="7.jpg" 
      width=150></TD>
    <TD width=150><IMG height=100 
      onmouseout=javascript:parent.frames[1].startscroll(); 
      onmouseover=javascript:parent.frames[1].stopscroll(); src="8.jpg" 
      width=150></TD>
    <TD width=150><IMG height=100 
      onmouseout=javascript:parent.frames[1].startscroll(); 
      onmouseover=javascript:parent.frames[1].stopscroll(); src="9.jpg" 
      width=150></TD>
    <TD width=150><IMG height=100 
      onmouseout=javascript:parent.frames[1].startscroll(); 
      onmouseover=javascript:parent.frames[1].stopscroll(); 
      src="10.jpg" width=150></TD>
    <TD width=150><IMG height=100 
      onmouseout=javascript:parent.frames[1].startscroll(); 
      onmouseover=javascript:parent.frames[1].stopscroll(); src="1.jpg" 
      width=150></TD>
    <TD width=150><IMG height=100 
      onmouseout=javascript:parent.frames[1].startscroll(); 
      onmouseover=javascript:parent.frames[1].stopscroll(); src="2.jpg" 
      width=150></TD>
    <TD width=150><IMG height=100 
      onmouseout=javascript:parent.frames[1].startscroll(); 
      onmouseover=javascript:parent.frames[1].stopscroll(); src="3.jpg" 
      width=150></TD>
    <TD width=150><IMG height=100 
      onmouseout=javascript:parent.frames[1].startscroll(); 
      onmouseover=javascript:parent.frames[1].stopscroll(); src="4.jpg" 
      width=150></TD>
    <TD width=150><IMG height=100 
      onmouseout=javascript:parent.frames[1].startscroll(); 
      onmouseover=javascript:parent.frames[1].stopscroll(); src="5.jpg" 
      width=150></TD>
    <TD width=150><IMG height=100 
      onmouseout=javascript:parent.frames[1].startscroll(); 
      onmouseover=javascript:parent.frames[1].stopscroll(); src="6.jpg" 
      width=150></TD>
    <TD width=150><IMG height=100 
      onmouseout=javascript:parent.frames[1].startscroll(); 
      onmouseover=javascript:parent.frames[1].stopscroll(); src="7.jpg" 
      width=150></TD>
    <TD width=150><IMG height=100 
      onmouseout=javascript:parent.frames[1].startscroll(); 
      onmouseover=javascript:parent.frames[1].stopscroll(); src="8.jpg" 
      width=150></TD>
    <TD width=150><IMG height=100 
      onmouseout=javascript:parent.frames[1].startscroll(); 
      onmouseover=javascript:parent.frames[1].stopscroll(); src="9.jpg" 
      width=150></TD>
    <TD width=150><IMG height=100 
      onmouseout=javascript:parent.frames[1].startscroll(); 
      onmouseover=javascript:parent.frames[1].stopscroll(); 
      src="10.jpg" width=150></TD></TR></TBODY></TABLE>3.将mqhx.htm 文件放在同级目录下，文件内容如下
------------------------------------
<SCRIPT language=JavaScript>
var x = 0;
var y = 0;
var limdex = 1500;
var dest = 0;
var distance = 0;
var step = 0;
var destination = 0;
var on = true;  function scrollit(destination) {
   step = 2;
   dest = destination;
   if (x<dest & x < limdex){
   while (x<dest) {
   step += (step / 7);
   x += step;
   parent.frames[0].scroll(x,0);
   }  
                          // top.main.scroll(dest,0);
   if(dest <=limdex) { parent.frames[0].scroll(dest,0); }
   x = dest;
   }
   if (x > dest)  {
   while (x>dest) {
   step += (step / 7);
   if(x >= (0+step)) { x -= step; parent.frames[0].scroll(x,0); }
   else break;
   }
   if(dest >= 0) { parent.frames[0].scroll(dest,0); }
   x = dest;
   }
   if (x<1) { parent.frames[0].scroll(1,0); x=1 }
   if (x>limdex) { parent.frames[0].scroll(limdex,0); x=limdex }
   x = dest;
  }  function scrollnow() {
    if (on){
      if (x < limdex & x >= 0 ) {              
        parent.frames[0].scroll(x,0);
        x = x + 1;
        setTimeout('scrollnow()', 8);
      }
      else if (x < 0) {
        x = limdex;
        scrollnow();
      }
      else {
        x=0;
        scrollnow();
      }
    }
  }  function stopscroll() {
    if (on){
      on = false;
    }
    else {
      on = true;
      scrollnow();
    }
  }
  function startscroll() { on = true; scrollnow(); }
  function stop_start() { 
   if (on){ on = false;}else { on = true;scrollnow();}
  }  scrollnow();</SCRIPT>

解决方案 »

  1.   

    <div id="demo" align="center" style="OVERFLOW:hidden;WIDTH:720px;COLOR:#ffffff">
    <table align="center" cellpadding="4" cellspacing="0" border="0">
    <tr>
    <td id="demo1">
    <img src="aaa/aaa.gif"><img src="aaa/aaa.gif"><img src="aaa/aaa.gif">
    <img src="aaa/aaa.gif"><img src="aaa/aaa.gif"><img src="aaa/aaa.gif">
    </td>
    <td id="demo2">
    </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>