循环滚动的图片

 在一个小的范围内显示多张图片

1.向上滚动的图片

<DIV id=demo style="OVERFLOW: hidden; WIDTH: 160px; COLOR: #ffffff; HEIGHT: 240px">
  <DIV id=demo1>
    <center>
      <!--从这里开始换成你的内容-->
      <IMG src="1.gif" width=150 height=120 border=0 alt="第一张">
      <IMG src="2.gif" width=150 height=120 border=0 alt="第二张">
      <IMG src="3.gif" width=150 height=120 border=0 alt="第三张">
      <!--内容结束-->
    </center>
  </DIV>
  <DIV id=demo2></DIV>
</DIV>
<SCRIPT Language="JavaScript">...
demo2.innerHTML = demo1.innerHTML; //克隆demo1为demo2
var speed = 30; //滚动速度，数字越小速度越快

function Marquee()...{
//内容滚动主函数
if(demo2.offsetTop-demo.scrollTop<=0)...{
//当滚动至demo1与demo2交界时
demo.scrollTop-=demo1.offsetHeight;  //demo跳到最顶端
}else...{
demo.scrollTop++;
}
initialize();
}

function initialize()...{ 
timer = setTimeout("Marquee()", speed);
}

function StopMarquee()...{
clearInterval(timer);
//清除定时器达到滚动停止的目的
}
initialize();
demo.onmouseover=StopMarquee //鼠标移上时清除定时器达到滚动停止的目的
demo.onmouseout=initialize //鼠标移开时重设定时器
</SCRIPT>

本例充分利用了图层的样式（OVERFLOW:
hidden），即超出部分不显示，并利用了两个相同内容图层作为过渡，因此看上去就像首尾相连的内容一直在滚动一样。

2.用按钮控制横向滚动的图片 （向左或是向右）

<table cellspacing="0" cellpadding="0" width="565" border="0">
  <tbody>
    <tr>
      <td align="right" width="9"><img id="Left" style="CURSOR: hand" height="158" src="images/tejia/l.gif" width="24" /></td>
      <td align="left" width="18"> </td>
      <td><div id="demo" style="OVERFLOW: hidden; WIDTH: 565px">//控制长度
        <table cellpadding="0" width="100%" border="0" 
cellspace="0">
          <tbody>
            <tr>
              <td id="demo1" valign="top"><table cellspacing="0" cellpadding="0" width="100%" 
                              border="0">
                <tbody>
                  <tr>
                    <td align="middle"><table bordercolor="#f0ece9" cellspacing="5" 
                                cellpadding="0" width="111" bgcolor="#f0ece9" 
border="0">
                      <tbody>
                        <tr>
                          <td bgcolor="#ffffff"><img src="images/tejia/01.jpg" width="146" height="130" /></td> //你的第一张图片
                        </tr>
                      </tbody>
                    </table></td>
                    <td align="middle"><table bordercolor="#f0ece9" cellspacing="5" 
                                cellpadding="0" width="111" bgcolor="#f0ece9" 
border="0">
                      <tbody>
<!--从这里开始换成你的内容-->
                        <tr>
                          <td bgcolor="#ffffff">
<img src="images/tejia/02.jpg" width="146" height="130" /></td>
<td><img src="images/tejia/03.jpg" width="146" height="130" /></td>
<td><img src="images/tejia/04.jpg" width="146" height="130" /></td>
<!--内容结束-->
                        </tr>
                      </tbody>
                    </table></td>
                    <td align="middle"><table bordercolor="#f0ece9" cellspacing="5" 
                                cellpadding="0" width="111" bgcolor="#f0ece9" 
border="0">
                      <tbody>
                        <tr>
                          <td bgcolor="#ffffff"><a href="#"><img src="images/tejia/24.jpg" width="146" height="130" border="0" /></a></td>//你的最后一张图片
                        </tr>
                      </tbody>
                    </table></td>
                  </tr>
                </tbody>
              </table></td>
              <td id="demo2" 
                      valign="top"></td>
            </tr>
          </tbody>
        </table>
      </div></td>
      <td align="right" width="18"> </td>
      <td align="left" width="9"><img id="right" 
                        style="CURSOR: hand" height="158" 
                        src="images/tejia/r.gif" width="24" 
                        name="right" /></td>
    </tr>
  </tbody>
</table>
</body>
<INPUT 
id=direction type=hidden value=0>
<SCRIPT>...
var speed=30;
demo2.innerHTML=demo1.innerHTML

</SCRIPT>

<SCRIPT language=javascript event=onclick for=right>...
      demo.scrollLeft=0;
     demo.scrollLeft=demo.scrollWidth
    document.all["direction"].value = "MarqueeRight";
</SCRIPT>

<SCRIPT language=javascript event=onclick for=Left>...
  demo.scrollLeft=0;
  document.all["direction"].value = "MarqueeLeft";
</SCRIPT>

<SCRIPT>...
function Marquee()...{
if(document.all["direction"].value=="MarqueeRight")
...{
      if(demo.scrollLeft<=0)
        demo.scrollLeft+=demo2.offsetWidth
      else...{
        demo.scrollLeft--
      }
 }
 else if(document.all["direction"].value=="MarqueeLeft")
 ...{
      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>