循环滚动的图片

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

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 >