js实现无缝隙循环向左滚动

最近学习JS时，要做一个向左滚动的特效，在网上查了查，都是下面类似的代码，我个人也认为是这样，可是，这段代码为什么运行，总是向左滚动没有多少就停止了呢，请懂的人帮帮忙
<div id="fx_gun_left" style="overflow:hidden;width:500px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="fx_gun_left1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<td><img src="http://jsweb8.cn/images/logo.gif"></td>
<td><img src="http://jsweb8.cn/images/logo.gif"></td>
<td><img src="http://jsweb8.cn/images/logo.gif"></td>
<td><img src="http://jsweb8.cn/images/logo.gif"></td>
<td><img src="http://jsweb8.cn/images/logo.gif"></td><td><img src="http://jsweb8.cn/images/logo.gif" width="88"></td>
<td><img src="http://jsweb8.cn/images/logo.gif"></td>
</tr>
</table>
</td>
<td id="fx_gun_left2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=30//速度数值越大速度越慢
fx_gun_left2.innerHTML=fx_gun_left1.innerHTML
function Marquee3(){
if(fx_gun_left2.offsetWidth-fx_gun_left.scrollLeft<=0)
fx_gun_left.scrollLeft-=fx_gun_left1.offsetWidth
else{
fx_gun_left.scrollLeft++
}
}
var MyMar3=setInterval(Marquee3,speed)
fx_gun_left.onmouseover=function() {clearInterval(MyMar3)}
fx_gun_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}
</script>

解决方案 »

  1.   

    估计是图片的问题,我换了下图片就没问题了
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
     </HEAD> <BODY>
      <div id="fx_gun_left" style="overflow:hidden;width:500px;">
    <table cellpadding="0" cellspacing="0" border="0">
    <tr><td id="fx_gun_left1" valign="top" align="center">
    <table cellpadding="2" cellspacing="0" border="0">
    <tr align="center">
    <td><img src="http://c.csdn.net/bbs/t/5/i/pic_logo.gif"></td>
    <td><img src="http://c.csdn.net/bbs/t/5/i/pic_logo.gif"></td>
    <td><img src="http://c.csdn.net/bbs/t/5/i/pic_logo.gif"></td>
    <td><img src="http://c.csdn.net/bbs/t/5/i/pic_logo.gif"></td>
    <td><img src="http://c.csdn.net/bbs/t/5/i/pic_logo.gif"></td><td><img src="http://c.csdn.net/bbs/t/5/i/pic_logo.gif"  width="88"></td>
    <td><img src="http://c.csdn.net/bbs/t/5/i/pic_logo.gif"></td>
    </tr>
    </table>
    </td>
    <td id="fx_gun_left2" valign="top"></td>
    </tr>
    </table>
    </div>
    <script>
    var speed=30//速度数值越大速度越慢
    fx_gun_left2.innerHTML=fx_gun_left1.innerHTML
    function Marquee3(){
    if(fx_gun_left2.offsetWidth - fx_gun_left.scrollLeft <= 0)
    fx_gun_left.scrollLeft -= fx_gun_left1.offsetWidth
    else{
    fx_gun_left.scrollLeft++
    }
    }
    var MyMar3=setInterval(Marquee3,speed)
    fx_gun_left.onmouseover=function() {clearInterval(MyMar3)}
    fx_gun_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}
    </script>
     </BODY>
    </HTML>
      

  2.   

    是你内层要滚的图片宽度太短了
    这样应该可以了
    <div id="fx_gun_left" style="overflow:hidden;width:500px;">
    <table cellpadding="0" cellspacing="0" border="0">
    <tr><td id="fx_gun_left1" valign="top" align="center">
    <table cellpadding="2" cellspacing="0" border="0" style="width:600px">
    <tr align="center">
    <td><img src="http://jsweb8.cn/images/logo.gif"></td>
    <td><img src="http://jsweb8.cn/images/logo.gif"></td>
    <td><img src="http://jsweb8.cn/images/logo.gif"></td>
    <td><img src="http://jsweb8.cn/images/logo.gif"></td>
    <td><img src="http://jsweb8.cn/images/logo.gif"></td><td><img src="http://jsweb8.cn/images/logo.gif" width="88"></td>
    <td><img src="http://jsweb8.cn/images/logo.gif"></td>
    </tr>
    </table>
    </td>
    <td id="fx_gun_left2" valign="top"></td>
    </tr>
    </table>
    </div>
    <script>
    var speed=30//速度数值越大速度越慢
    fx_gun_left2.innerHTML=fx_gun_left1.innerHTML
    function Marquee3(){
    if(fx_gun_left2.offsetWidth-fx_gun_left.scrollLeft<=0)
    fx_gun_left.scrollLeft-=fx_gun_left1.offsetWidth
    else{
    fx_gun_left.scrollLeft++
    }
    }
    var MyMar3=setInterval(Marquee3,speed)
    fx_gun_left.onmouseover=function() {clearInterval(MyMar3)}
    fx_gun_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}
    </script>
      

  3.   

    我改了还是不行，请看一下这一段，怎么改，这个简单些，但是我一运行就是四行同时滚动，而且会停止，是哪里的问题呢？？？
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> 向左滚动 </TITLE>
     </HEAD>
     <BODY>
     <div id="dome" style="overflow:hidden;width:50px;">
    <div id="gundong1">
    <img src="http://c.csdn.net/bbs/t/5/i/pic_logo.gif">
    <img src="http://c.csdn.net/bbs/t/5/i/pic_logo.gif">
    </div>
     <div id="gundong2"></div>
     </div>
     <script type="text/javascript">
    var speed=50;
    var dome=document.getElementById("dome");
    var gundong1=document.getElementById("gundong1");
    var gundong2=document.getElementById("gundong2");
    gundong2.innerHTML=gundong1.innerHTML;
    function moveLeft(){
    if(gundong2.offsetWidth - dome.scrollLeft <=0){
    dome.scrollLeft-=gundong1.offsetWidth;
    }
    else{
    dome.scrollLeft++;
    }
    }
    var myMar=setInterval(moveLeft,speed);
     </script>
     </BODY>
    </HTML>
      

  4.   

    都设置固定的宽度就可以了<table cellpadding="2" cellspacing="0" border="0">
    <tr align="center">
    <td><img src="http://jsweb8.cn/images/logo.gif" width="88"></td>
    <td><img src="http://jsweb8.cn/images/logo.gif" width="88"></td>
    <td><img src="http://jsweb8.cn/images/logo.gif" width="88"></td>
    <td><img src="http://jsweb8.cn/images/logo.gif" width="88"></td>
    <td><img src="http://jsweb8.cn/images/logo.gif" width="88"></td>
    <td><img src="http://jsweb8.cn/images/logo.gif" width="88"></td>
    <td><img src="http://jsweb8.cn/images/logo.gif" width="88"></td>
    </tr>
    </table>