图片横向连续滚动js代码

最新推荐文章于 2024-08-28 11:23:30 发布

最新推荐文章于 2024-08-28 11:23:30 发布 · 189 阅读

本文介绍了一种使用 HTML 和 JavaScript 实现图片自动滚动显示的方法。通过设置表格宽度大于显示区域，并利用 JavaScript 控制水平滚动条的位置，可以使得图片连续平滑地滚动展示。文章详细解释了代码的实现细节。

<DIV id=demo style="OVERFLOW: hidden; WIDTH: 450px; HEIGHT: 300px;"> <TABLE cellSpacing=0 cellPadding=0 border=0> <TBODY> <TR> <TD id=demo1>  <table width="800" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="80" align="center"><img src="bild1.jpg" width="60" height="60" /></td> <td width="80" align="center"><img src="bild2.jpg" width="60" height="60" /></td> <td width="80" align="center"><img src="bild3.jpg" width="60" height="60" /></td> <td width="80" align="center"><img src="bild4.jpg" width="60" height="60" /></td> <td width="80" align="center"><img src="bild5.jpg" width="60" height="60" /></td> <td width="80" align="center"><img src="bild6.jpg" width="60" height="60" /></td> <td width="80" align="center"><img src="bild7.jpg" width="60" height="60" /></td> <td width="80" align="center"><img src="bild8.jpg" width="60" height="60" /></td> <td width="80" align="center"><img src="bild9.jpg" width="60" height="60" /></td> <td width="80" align="center"><img src="bild10.jpg" width="60" height="60" /></td> </tr> </table>  </TD> <TD id=demo2></TD></TR></TBODY></TABLE> </DIV> <SCRIPT> var speed3=5//速度数值越大速度越慢 demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo2.offsetWidth-demo.scrollLeft<=0) demo.scrollLeft-=demo1.offsetWidth else{ demo.scrollLeft++ } } var MyMar=setInterval(Marquee,speed3) demo.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout=function() {MyMar=setInterval(Marquee,speed3)} </SCRIPT>