图片连续滚动不兼容火狐浏览器、、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head><body>
<div id="demo" style="overflow:hidden;width:754px; margin:0 auto;">
<table align="center" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td id="demo1"><table width="98%" border="0" cellpadding="0" cellspacing="2">
          <tr>
            <td><img src="" width="120" height="90" alt="a" /></td>
            <td><img src="" width="120" height="90" alt="b" /></td>
            <td><img src="" width="120" height="90" alt="c" /></td>
            <td><img src="" width="120" height="90" alt="d" /></td>
            <td><img src="" width="120" height="90" alt="e" /></td>
            <td><img src="" width="120" height="90" alt="f" /></td>
            <td><img src="" width="120" height="90" alt="g" /></td>
            <td><img src="" width="120" height="90" alt="h" /></td>
            <td><img src="" width="120" height="90" alt="i" /></td>
            <td><img src="" width="120" height="90" alt="j" /></td>
            <td><img src="" width="120" height="90" alt="k" /></td>
            <td><img src="" width="120" height="90" alt="l" /></td>
            <td><img src="" width="120" height="90" alt="m" /></td>
            <td><img src="" width="120" height="90" alt="n" /></td>
            <td><img src="" width="120" height="90" alt="o" /></td>
          </tr>
        </table></td>
      <td id="demo2"></td>
    </tr>
</table>
</div>
<script language="JavaScript">
    var speed=20;
var demo=document.getElementById("demo");
var demo1=document.getElementById("demo1");
var demo2=document.getElementById("demo2");
    demo2.innerHTML=demo1.innerHTML;    //克隆demo1为demo2
    
    function Marquee(){
        if(demo2.offsetWidth <= demo.scrollLeft){    //当滚动至demo1与demo2交界时
            demo.scrollLeft = demo.scrollLeft - demo1.offsetWidth;        //demo跳到最顶端
        }
        else{
            demo.scrollLeft++;
        }
    }
    var MyMar=setInterval(Marquee,speed);    //设置定时器
    demo.onmouseover=function() {clearInterval(MyMar);}//鼠标移上时清除定时器达到滚动停止的目的
    demo.onmouseout=function() {MyMar=setInterval(Marquee,speed);}//鼠标移开时重设定时器
</script> </body>
</html>

解决方案 »

  1.   

    帮LZ试了，我给每个img的src加了实际的图标路径后好用，应该是火狐在解析src没有内容的img标签时就不显示了，于是就看不到效果了，不像IE会显示成带img标签的长宽的红X
      

  2.   

    这样每次用的时候需要修改javascript中很多东西，看看这个：
    http://blog.bossma.cn/javascript/javascript-flexible-scroll-words-or-images/这个程序可以自己设置水平（左右）、垂直（上下）滚动，设置滚动时间间隔和每次滚动距离，并且兼容多种浏览器用起来也很方便：
    <html>
    <head>
    <title>图片向左滚动</title>
    <script type="text/javascript" src="bossma-jscroll.js"></script>
    <script type="text/javascript">
    window.onload=function(){
    //参数依次为：滚动方向，滚动速度，容器ID，容器宽度，容器高度，滚动内容宽度，滚动内容高度，滚动步长
    var scroll =new JScroll("left",30,"content",558,165,1674,165,1);
    scroll.Start();
    };
    </script>
    </head>
    <body>
    <div id="title" style="width:100%;height:40px;">图片向左滚动</div>
    <div id="content">
    <!--
    滚动元素内部的水平排列需要自己来写，不要写到容器div（比如这里的id:content）的样式中。
    -->
    <div style="float:left"><img src="images/1.png" /></div>
    <div style="float:left"><img src="images/2.png" /></div>
    <div style="float:left"><img src="images/3.png" /></div>
    </div>
    <div id="foot"></div>
    </body>
    </html>看看这个：
    http://blog.bossma.cn/javascript/javascript-flexible-scroll-words-or-images/这个程序可以自己设置水平（左右）、垂直（上下）滚动，设置滚动时间间隔和每次滚动距离，并且兼容多种浏览器用起来也很方便：
    <html>
    <head>
    <title>图片向左滚动</title>
    <script type="text/javascript" src="bossma-jscroll.js"></script>
    <script type="text/javascript">
    window.onload=function(){
    //参数依次为：滚动方向，滚动速度，容器ID，容器宽度，容器高度，滚动内容宽度，滚动内容高度，滚动步长
    var scroll =new JScroll("left",30,"content",558,165,1674,165,1);
    scroll.Start();
    };
    </script>
    </head>
    <body>
    <div id="title" style="width:100%;height:40px;">图片向左滚动</div>
    <div id="content">
    <!--
    滚动元素内部的水平排列需要自己来写，不要写到容器div（比如这里的id:content）的样式中。
    -->
    <div style="float:left"><img src="images/1.png" /></div>
    <div style="float:left"><img src="images/2.png" /></div>
    <div style="float:left"><img src="images/3.png" /></div>
    </div>
    <div id="foot"></div>
    </body>
    </html>