循环滚动的图片

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

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>