滚动图片

最新推荐文章于 2021-06-04 08:39:37 发布

最新推荐文章于 2021-06-04 08:39:37 发布 · 80 阅读

本文介绍了一种基于HTML与JavaScript实现的横向图片滚动效果。通过设置图片的宽度和位置，结合JavaScript定时器，使得图片能在页面中自动平滑滚动。具体包括图片的布局、速度控制及鼠标悬停停止滚动等功能。

<CENTER><br> <TABLE <br>style="BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BORDER-LEFT: #666666 1px solid; BORDER-BOTTOM: #666666 1px solid" <br>cellSpacing=0 cellPadding=0 width=300 align=center border=0><br> <TBODY><br> <TR><br> <TD><br> <DIV id=demo style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #ffffff"><br> <TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0"><br> <TBODY><br> <TR><br> <TD id=demo1 vAlign=top><table width="400" height="100" border="0" cellpadding="0" cellspacing="0"><br> <tr><br> <td width="50" ><div align="center"><a href='#'><img src='CodeFiles/横向图片滚动/0001.jpg' /></a></div></td><br> <td width="50" ><div align="center"><a href='#'><img src='CodeFiles/横向图片滚动/0002.jpg' /></a></div></td><br> <td width="50" ><div align="center"><a href='#'><img src='CodeFiles/横向图片滚动/0003.jpg' /></a></div></td><br> <td width="50" ><div align="center"><a href='#'><img src='CodeFiles/横向图片滚动/0004.jpg' /></a></div></td><br> </tr><br> </table></TD><br> <TD id=demo2 vAlign=top> </TD></TR></TBODY></TABLE></DIV><br> <SCRIPT><br>var speed3=25//速度数值越大速度越慢<br>demo2.innerHTML=demo1.innerHTML<br>function Marquee(){<br>if(demo2.offsetWidth-demo.scrollLeft<=0)<br>demo.scrollLeft-=demo1.offsetWidth<br>else{<br>demo.scrollLeft++<br>}<br>}<br>var MyMar=setInterval(Marquee,speed3)<br>demo.onmouseover=function() {clearInterval(MyMar)}<br>demo.onmouseout=function() {MyMar=setInterval(Marquee,speed3)}<br></SCRIPT><br> </TD></TR></TBODY></TABLE></TD></TR></TABLE><br></CENTER>