连续滚动图片JavaScript 代码

本文介绍了一个使用JavaScript实现的图片滚动效果案例。通过设置定时器,文章中的图片可以在一个指定区域内水平滚动显示。当鼠标悬停在该区域时,滚动会暂停;鼠标移开后,滚动继续。此案例适用于网页设计中需要动态展示多个图片的情况。

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

<script type="text/javascript"> 
//more javascript from http://www.smallrain.net
document.write('<table align=center width=774 border=0 cellpadding=0 cellspacing=0 style=BORDER-LEFT: #cccccc 1px solid;BORDER-RIGHT: #cccccc 1px solid>'); 
document.write(
' <tr> '); 
document.write(
' <td width=774 height=120 align=center class=border01 bgcolor=#FFFFFF>'); 
document.write(
' <div id=demo style=overflow:hidden;width:750;align=center>'); 
document.write(
' <table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 >'); 
document.write(
' <tr>'); 
document.write(
' <td valign=top bgcolor=ffffff id=marquePic1> '); 
document.write(
' <table width=90% border=0 cellspacing=0 cellpadding=0>'); 
document.write(
' <tr align=center> '); 
document.write(
' <td><a href="#" target="new"><img src=http://www.smallrain.net/jsimg/1.jpg width=150 height=100 hspace=2 border=0></a></td>'); 
document.write(
' <td><a href="#" target="new"><img src=http://www.smallrain.net/jsimg/2.jpg width=150 height=100 hspace=2 border=0></a></td>'); 
document.write(
' <td><a href="#" target="new"><img src=http://www.smallrain.net/jsimg/4.jpg width=150 height=100 hspace=2 border=0></a></td>'); 
document.write(
' <td><a href="#" target="new"><img src=http://www.smallrain.net/jsimg/5.jpg width=150 height=100 hspace=2 border=0></a></td>'); 
document.write(
' <td><a href="#" target="new"><img src=http://www.smallrain.net/jsimg/6.jpg width=150 height=100 hspace=2 border=0></a></td>'); 
document.write(
' </tr>'); 
document.write(
' </table>'); 
document.write(
' </td>'); 
document.write(
' <td id=marquePic2 valign=top></td>'); 
document.write(
' </tr>'); 
document.write(
' </table>'); 
document.write(
' </div>'); 
document.write(
' </td>'); 
document.write(
' </tr>'); 
document.write(
' </table>'); 
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)} 

</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值