javascript实现页面图片不间断连续滚动

最新推荐文章于 2025-12-29 10:47:54 发布

转载最新推荐文章于 2025-12-29 10:47:54 发布 · 660 阅读

文章标签：

#javascript #border #function #table #class #div

本文介绍了一种使用 JavaScript 和 HTML 实现的图片滚动展示效果。通过设置定时器使图片在页面上自动滚动展示，同时提供了鼠标悬停暂停滚动的功能。适用于网站轮播图等应用场景。

<table align=center width=800 border=0 cellpadding=0 cellspacing=0 style=BORDER-LEFT: #cccccc 1px solid;BORDER-RIGHT: #cccccc 1px solid>
<tr>
<td width=800 height=120 align=center class=border01 bgcolor=#FFFFFF>
<div id=demo style=overflow:hidden;width:800;align=center>
<table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 >
<tr>
<td valign=top bgcolor=ffffff id=marquePic1>
<table width=90% border=0 cellspacing=0 cellpadding=0>
<tr align=center>
<td><a href="http://www.aosilian.com" target="new"><img src=http://www.aosilian.com//tu/01.jpg hspace=2 border=0> </a></td>
<td><a href="http://www.aosilian.com" target="new"><img src=http://www.aosilian.com//tu/02.jpg hspace=2 border=0> </a></td>
<td><a href="http://www.aosilian.com" target="new"><img src=http://www.aosilian.com//tu/04.jpg hspace=2 border=0> </a></td>
<td><a href="http://www.aosilian.com" target="new"><img src=http://www.aosilian.com//tu/05.jpg hspace=2 border=0> </a></td>
<td><a href="http://www.aosilian.com" target="new"><img src=http://www.aosilian.com//tu/06.jpg hspace=2 border=0> </a></td>
<td><a href="http://www.aosilian.com" target="new"><img src=http://www.aosilian.com//tu/07.jpg hspace=2 border=0> </a></td>
</tr>
</table>
</td>
<td id=marquePic2 valign=top></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
var speed=30
marquePic2.innerHTML=marquePic1.innerHTML
function Marquee(){
if(demo.scrollLeft>=marquePic1.scrollWidth){
demo.scrollLeft=0
}else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}