跑马灯让他无空白的循环播放！
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了跑马灯让他无空白的循环播放！相关的知识，希望对你有一定的参考价值。
我想让4个图片在一个div里面 循环播放 中间不要空白！我现在的效果是这样的：
4321 向右，第四个后面是空白 等第4个播完以后，第一个才冒出来。
我现在想要这样：
4321 向右，第4个播完以后紧接着第1个跟着播放 怎么实现这种效果啊！
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<HTML>
<HEAD>
</HEAD>
<BODY>
<table width= "760 " align= "center " border= "1 " >
<tr>
<td align= "center ">
<div id=demo style= 'overflow:hidden;height:110px;width:750px; '>
<table height=110 border=0 cellspacing=0 cellpadding=0>
<tr>
<td id=demo1>
<!-- 下面是你要显示的内容 -->
<table width=780>
<tr>
<td> 第一 </td>
<td> 第二 </td>
<td> 文章标题 </td>
<td> 最牛交通工具 <br> 添 加： <br> 更新时间：2004年10月9日 ' </td>
<td> 经典动物幽默图集 <br> 添 加： <br> 更新时间：2004年10月7日 ' </td>
<td> 新化二中 <br> 添 加： <br> 更新时间：2004年10月7日 ' </td>
</tr>
</table>
<!-- 显示的内容结束！ -->
</td>
<td id=demo2> </td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<script>
var speed=15
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>
</td>
</tr>
</table>
</BODY>
</HTML>
二、纵向滚动
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<HTML>
<HEAD>
</HEAD>
<BODY>
<table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr> <td align="center"> <table width="150" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="194" style="padding-top:8px" valign="top">
<DIV id=rolllinkk style="OVERFLOW: hidden; WIDTH: 145px; HEIGHT: 200px">
<DIV id=rolllinkk1>
<!-- 下面是你要显示的内容 -->
<table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr> <td align="center">最牛交通工具 </td> </tr>
<tr> <td align="center">最牛交通工具 </td> </tr>
<tr> <td align="center">最牛交通工具 </td> </tr>
<tr> <td align="center">最牛交通工具 </td> </tr>
<tr> <td align="center">最牛交通工具 </td> </tr>
<tr> <td align="center">最牛交通工具 </td> </tr>
<tr> <td align="center">最牛交通工具 </td> </tr>
<tr> <td align="center">最牛交通工具 </td> </tr>
<tr> <td align="center">最牛交通工具 </td> </tr>
<tr> <td align="center">最牛交通工具 </td> </tr>
<tr> <td align="center">最牛交通工具 </td> </tr>
</table>
<!-- 显示的内容结束！ -->
<DIV align=center> </DIV> </DIV>
<DIV id=rolllinkk2>
<DIV align=center> </DIV> </DIV> </DIV>
<SCRIPT>
var rollspeed=30
rolllinkk2.innerHTML=rolllinkk1.innerHTML //
function Marquee1()
if(rolllinkk2.offsetTop-rolllinkk.scrollTop <=0) //
rolllinkk.scrollTop-=rolllinkk1.offsetHeight //
else
rolllinkk.scrollTop++
var MyMar1=setInterval(Marquee1,rollspeed) //
rolllinkk.onmouseover=function() clearInterval(MyMar1)//
rolllinkk.onmouseout=function() MyMar1=setInterval(Marquee1,rollspeed)//
</SCRIPT>
</td>
</tr>
</table>
</td> </tr>
</table>
</td>
</tr>
</table>
</BODY>
</HTML>本回答被提问者和网友采纳
Marquee(跑马灯)横向纵向无空白的不间断连续循环滚动代码
https://bbs.csdn.net/topics/120063623
可以通过改造，让datalist的列表内容呈现跑马灯效果
Marquee(跑马灯)横向、无空白的不间断连续循环滚动代码!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
</HEAD>
<BODY>
<table width="760" align="center" border="1" >
<tr>
<td align="center">
<div id=demo style=‘overflow:hidden;height:110px;width:750px;‘>
<table height=110 border=0 cellspacing=0 cellpadding=0>
<tr>
<td id=demo1>
<!-- 下面是你要显示的内容 -->
<table width=780>
<tr>
<td>第一</td>
<td>第二</td>
<td>文章标题</td>
<td>最牛交通工具<br>添 加：<br>更新时间：2004年10月9日‘</td>
<td>经典动物幽默图集<br>添 加：<br>更新时间：2004年10月7日‘</td>
<td>新化二中<br>添 加：<br>更新时间：2004年10月7日‘</td>
</tr>
</table>
<!-- 显示的内容结束！ -->
</td>
<td id=demo2></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<script>
var speed=15
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>
</BODY>
</HTML>
========================================================================
Marquee(跑马灯)纵向、无空白的不间断连续循环滚动代码!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<HTML>
<HEAD>
</HEAD>
<BODY>
<table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr><td align="center"><table width="150" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="194" style="padding-top:8px" valign="top">
<DIV id=rolllinkk style="OVERFLOW: hidden; WIDTH: 145px; HEIGHT: 200px">
<DIV id=rolllinkk1>
<!-- 下面是你要显示的内容 -->
<table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr><td align="center">最牛交通工具</td></tr>
<tr><td align="center">最牛交通工具</td></tr>
<tr><td align="center">最牛交通工具</td></tr>
<tr><td align="center">最牛交通工具</td></tr>
<tr><td align="center">最牛交通工具</td></tr>
<tr><td align="center">最牛交通工具</td></tr>
<tr><td align="center">最牛交通工具</td></tr>
<tr><td align="center">最牛交通工具</td></tr>
<tr><td align="center">最牛交通工具</td></tr>
<tr><td align="center">最牛交通工具</td></tr>
<tr><td align="center">最牛交通工具</td></tr>
</table>
<!-- 显示的内容结束！ -->
<DIV align=center></DIV></DIV>
<DIV id=rolllinkk2>
<DIV align=center></DIV></DIV></DIV>
<SCRIPT>
var rollspeed=30
rolllinkk2.innerHTML=rolllinkk1.innerHTML //
function Marquee1(){
if(rolllinkk2.offsetTop-rolllinkk.scrollTop<=0) //
rolllinkk.scrollTop-=rolllinkk1.offsetHeight //
else{
rolllinkk.scrollTop++
}
}
var MyMar1=setInterval(Marquee1,rollspeed) //
rolllinkk.onmouseover=function() {clearInterval(MyMar1)}//
rolllinkk.onmouseout=function() {MyMar1=setInterval(Marquee1,rollspeed)}//
</SCRIPT>
</td>
</tr>
</table>
</td></tr>
</table>
</BODY>
</HTML>
以上是关于跑马灯让他无空白的循环播放！的主要内容，如果未能解决你的问题，请参考以下文章