网上有这样一段代码，基本我看了一下，都一个样，而且很多网站使用的时候还是照样原搬的，这段代码需要注意的问题：marquee_demo这个宽度一定要小于含有滚动内容的那个table的宽度，否则将不滚动

<div id="marquee_demo" style="border: #ccc 1px solid;overflow: hidden; width: 500px; text-align: center">
<table cellspacing="0" cellpadding="3" align="center" border="0">
    <tbody>
        <tr>
            <td id="marquee_product1" valign="top">
            <table height="100" cellspacing="0" cellpadding="0" width="800" border="0">
                <tbody>
                    <tr>
                        <td align="center" width="180" style="padding-right: 15px; padding-left: 15px; padding-bottom: 3px; padding-top: 3px">1</td>
                        <td align="center" width="180" style="padding-right: 15px; padding-left: 15px; padding-bottom: 3px; padding-top: 3px">2</td>
                        <td align="center" width="180" style="padding-right: 15px; padding-left: 15px; padding-bottom: 3px; padding-top: 3px">3</td>
                        <td align="center" width="180" style="padding-right: 15px; padding-left: 15px; padding-bottom: 3px; padding-top: 3px">4</td>
                        <td align="center" width="180" style="padding-right: 15px; padding-left: 15px; padding-bottom: 3px; padding-top: 3px">5</td>
                        <td align="center" width="180" style="padding-right: 15px; padding-left: 15px; padding-bottom: 3px; padding-top: 3px">6</td>
                        <td align="center" width="180" style="padding-right: 15px; padding-left: 15px; padding-bottom: 3px; padding-top: 3px">7</td>
                        <td align="center" width="180" style="padding-right: 15px; padding-left: 15px; padding-bottom: 3px; padding-top: 3px">8</td>
                    </tr>
                </tbody>
            </table>
            </td>
            <td id="marquee_product2" valign="top">&nbsp;</td>
        </tr>
    </tbody>
</table>
</div>
<script type="text/javascript">
var speed = 30;
marquee_product2.innerHTML = marquee_product1.innerHTML;
function Marquee(){
 if(marquee_demo.scrollLeft >= marquee_product1.scrollWidth){ 
 marquee_demo.scrollLeft = 0;
 }
 else{ 
  marquee_demo.scrollLeft++;
 }
}
var MyMar = setInterval(Marquee,speed);
marquee_demo.onmouseover = function(){clearInterval(MyMar);}
marquee_demo.onmouseout = function(){MyMar = setInterval(Marquee,speed);}
</script>

问题来了，网上很多提供的这个代码都是仅仅是上述这样，那么在Firefox下则无法运行这个效果，我们需要做一下修改。。。将JS代码改成如下：
以下是Javascript代码：【运行代码】【复制代码】 var speed = 30;
document.getElementById('marquee_product2').innerHTML = document.getElementById('marquee_product1').innerHTML;
function Marquee(){
if(document.getElementById('marquee_demo').scrollLeft >= document.getElementById('marquee_product1').scrollWidth){
document.getElementById('marquee_demo').scrollLeft = 0;
}
else{
document.getElementById('marquee_demo').scrollLeft++;
}
}
var MyMar = setInterval(Marquee,speed);
document.getElementById('marquee_demo').onmouseover = function(){clearInterval(MyMar);}
document.getElementById('marquee_demo').onmouseout = function(){MyMar = setInterval(Marquee,speed);}
完整的演示代码如下：
以下是代码：【运行代码】【复制代码】 <div id="marquee_demo" style="border: #ccc 1px solid;overflow: hidden; width: 500px; text-align: center">
<table cellspacing="0" cellpadding="3" align="center" border="0">
<tbody>
<tr>
<td id="marquee_product1" valign="top">
<table height="100" cellspacing="0" cellpadding="0" width="800" border="0">
<tbody>
<tr>
<td align="center" width="180" style="padding-right: 15px; padding-left: 15px; padding-bottom: 3px; padding-top: 3px">1</td>
<td align="center" width="180" style="padding-right: 15px; padding-left: 15px; padding-bottom: 3px; padding-top: 3px">2</td>
<td align="center" width="180" style="padding-right: 15px; padding-left: 15px; padding-bottom: 3px; padding-top: 3px">3</td>
<td align="center" width="180" style="padding-right: 15px; padding-left: 15px; padding-bottom: 3px; padding-top: 3px">4</td>
<td align="center" width="180" style="padding-right: 15px; padding-left: 15px; padding-bottom: 3px; padding-top: 3px">5</td>
<td align="center" width="180" style="padding-right: 15px; padding-left: 15px; padding-bottom: 3px; padding-top: 3px">6</td>
<td align="center" width="180" style="padding-right: 15px; padding-left: 15px; padding-bottom: 3px; padding-top: 3px">7</td>
<td align="center" width="180" style="padding-right: 15px; padding-left: 15px; padding-bottom: 3px; padding-top: 3px">8</td>
</tr>
</tbody>
</table>
</td>
<td id="marquee_product2" valign="top">&nbsp;</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
<!--
var speed = 30;
document.getElementById('marquee_product2').innerHTML = document.getElementById('marquee_product1').innerHTML;
function Marquee(){
if(document.getElementById('marquee_demo').scrollLeft >= document.getElementById('marquee_product1').scrollWidth){
document.getElementById('marquee_demo').scrollLeft = 0;
}
else{
document.getElementById('marquee_demo').scrollLeft++;
}
}
var MyMar = setInterval(Marquee,speed);
document.getElementById('marquee_demo').onmouseover = function(){clearInterval(MyMar);}
document.getElementById('marquee_demo').onmouseout = function(){MyMar = setInterval(Marquee,speed);}
//-->
</script> 当然，我们还可以更改一下，让它变为向上滚动。。。演示代码如下，请自己参考修改：
以下是代码：【运行代码】【复制代码】 <div id="marquee_demo" style="border:1px solid #ccc;overflow: hidden;width:50px;height:100px;text-align:center">
<table cellspacing="0" cellpadding="3" align="center" border="0">
<tbody>
<tr>
<td id="marquee_product1" valign="top">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td align="center" height="80" style="padding-right: 15px; padding-left: 15px; padding-bottom: 3px; padding-top: 3px">1</td>
</tr>
<tr>
<td align="center" height="80" style="padding-right: 15px; padding-left: 15px; padding-bottom: 3px; padding-top: 3px">2</td>
</tr>
<tr>
<td align="center" height="80" style="padding-right: 15px; padding-left: 15px; padding-bottom: 3px; padding-top: 3px">3</td>
</tr>
<tr>
<td align="center" height="80" style="padding-right: 15px; padding-left: 15px; padding-bottom: 3px; padding-top: 3px">4</td>
</tr>
<tr>
<td align="center" height="80" style="padding-right: 15px; padding-left: 15px; padding-bottom: 3px; padding-top: 3px">5</td>
</tr>
<tr>
<td align="center" height="80" style="padding-right: 15px; padding-left: 15px; padding-bottom: 3px; padding-top: 3px">6</td>
</tr>
<tr>
<td align="center" height="80" style="padding-right: 15px; padding-left: 15px; padding-bottom: 3px; padding-top: 3px">7</td>
</tr>
<tr>
<td align="center" height="80" style="padding-right: 15px; padding-left: 15px; padding-bottom: 3px; padding-top: 3px">8</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td id="marquee_product2" valign="top">&nbsp;</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
<!--
var speed = 10;
document.getElementById('marquee_product2').innerHTML = document.getElementById('marquee_product1').innerHTML;
function Marquee(){
if(document.getElementById('marquee_demo').scrollTop >= document.getElementById('marquee_product1').scrollHeight){
document.getElementById('marquee_demo').scrollTop = 0;
}
else{
document.getElementById('marquee_demo').scrollTop++;
}
}
var MyMar = setInterval(Marquee,speed);
document.getElementById('marquee_demo').onmouseover = function(){clearInterval(MyMar);}
document.getElementById('marquee_demo').onmouseout = function(){MyMar = setInterval(Marquee,speed);}
//-->
</script>