<marquee> 图片收尾相连

最新推荐文章于 2023-06-16 17:34:41 发布

haihua_sun

最新推荐文章于 2023-06-16 17:34:41 发布

阅读量549

点赞数

文章标签：数据库

本文介绍了一种首尾相连的无缝滚动特效实现方法，该方法适用于文字和图片的滚动展示，并提供了具体的HTML和JavaScript代码示例。

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

首尾相连无缝滚动特效,此特效可以实现文字，图片，从右向走首尾相连无缝滚动，图片和文字可以是直接写上的也可以是从数据库中取出的。
　　下面以直接添加上的图片为例，对于文字只需把图片替换就可以了：
<table cellspacing=0 cellpadding=0 width=300 align=center border=0>
<tr>
<td height=25>
<div id=demo style="OVERFLOW: hidden; WIDTH: 300px; COLOR: #ffffff; HEIGHT: 25px">
<table cellPadding=0 align=left border=0 cellspacing=0>
<tr>
<td id=demo1 width=300>
<table cellspacing=0 cellpadding=0 width=300 align=center border=0>
<tr>
<td width=300><img src=skins/default/UBB/Icons/flash.gif><img src=skins/default/UBB/Icons/music.gif><img src=skins/default/UBB/Icons/flash.gif><img src=skins/default/UBB/Icons/music.gif></td>
</tr>
</table>
</td>
<td id=demo2></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<SCRIPT>
var speed=8
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>