图片横向连续滚动js代码

最新推荐文章于 2025-05-09 12:29:22 发布

iteye_20785

最新推荐文章于 2025-05-09 12:29:22 发布

阅读量179

点赞数

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>