javascript实现滚动图片

最新推荐文章于 2025-03-12 13:07:57 发布

转载最新推荐文章于 2025-03-12 13:07:57 发布 · 773 阅读

文章标签：

#javascript #function #border #table #div

本文介绍了一种使用HTML与JavaScript实现的图片滚动展示效果。通过设置定时器与鼠标悬停事件，使图片能够自动水平滚动展示，提升了用户体验。

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

<DIV id=demo
style="OVERFLOW: hidden; WIDTH: 640; COLOR: #ffffff; HEIGHT: 130px">
<TABLE cellPadding=0 align=left border=0 cellspace="0">
<TBODY>
<TR>
<TD id=demo1 vAlign=top>
<TABLE cellSpacing=0 cellPadding=5 border=0>
<TBODY>
<TR align=middle>
<TD width=200>
<img src="images/tupian/3-12.jpg" width="160" height="113" /> </TD>
<TD width=200>
<img src="images/tupian/2003-12-wa.jpg" width="160" height="113" /> </TD>
<TD width=200>
<img src="images/tupian/2003-12-wa-6.jpg" width="160" height="113" /> </TD>
<TD width=200>
<img src="images/tupian/2003-12-wa-4.jpg" width="160" height="113" /> </TD>
</TR></TBODY></TABLE></TD>
<TD id=demo2 vAlign=top></TD></TR></TBODY></TABLE></DIV>
<SCRIPT>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
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>