无间隙图片滚动（向左）

关于图片循环滚动的代码，在网上随处可见，但不是浏览器兼容问题，就是图片前一轮与后一轮的滚动间距无法解决。

参考了网上的许多资料后，总结出一些可用的。

【一】不利用JS，使用marquee标签。据说marquee已经被摒弃。。。具体用法百度也有，感觉它最大的好处就是实现简单，唯一的不足是会出现空白的间隙。适合文字或者少量图片的滚动播放，用于一组图片的播放就怪怪的。

代码如下：

<div class="show_window">
    <marquee class="pic_content" scrollamount="20" align="left" direction="left">
        <img src="img/1.jpg" alt="img"  align="middle"/>
        <img src="img/2.jpg" alt="img" align="middle"/>
        <img src="img/3.jpg" alt="img" align="middle"/>
        <img src="img/4.jpg" alt="img" align="middle"/>
        <img src="img/5.jpg" alt="img" align="middle"/>
        <img src="img/6.jpg" alt="img" align="middle"/>
        <img src="img/7.jpg" alt="img" align="middle"/>
        <img src="img/8.jpg" alt="img" align="middle"/>
        <img src="img/9.jpg" alt="img" align="middle"/>
        <img src="img/10.jpg" alt="img" align="middle"/>

    </marquee>
    </div>

【二】使用到JS，图片无间隙滚动！但这里有一个十分重要的地方，就是内层的demo1的宽度（上下时就是高度）一定要大于外层的demo的宽度（高度）才能实现循环播放。之前就是因为忽略了这个问题，导致纠结了好久。。。冏。当然，这个例子里，demo1的宽度是没有指定的，它由内嵌的table的宽度决定（900px），大于demo的500px了吧~~~

 <div id="demo" style="overflow:hidden;height:100px;width:500px; background-color:Silver">
        <table cellspacing="0" cellpadding="0" border="0">
        <tr>
        <td id="demo1">
        <table width="900px" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td><img src="img/1.jpg"/></td>
              <td><img src="img/2.jpg"/></td>
              <td><img src="img/3.jpg"/></td>
              <td><img src="img/4.jpg"/></td>
              <td><img src="img/5.jpg"/></td>
              <td><img src="img/6.jpg"/></td>
              <td><img src="img/7.jpg"/></td>
            </tr>
        </table></td>
        <td id="demo2"></td>
        </tr>
        </table>
        <script language="javascript" type="text/javascript">
            var speed =30
            var MyMar = setInterval(Marquee, speed)
            var demo_ = document.getElementById("demo");//用getElememtById是为了兼容FF
            var demo2_ = document.getElementById("demo2");
            var demo1_ = document.getElementById("demo1");
            demo2_.innerHTML = demo1_.innerHTML
            demo.onmouseover =function () { clearInterval(MyMar) }
            demo.onmouseout =function () { MyMar = setInterval(Marquee, speed) }
            function Marquee() {
                if (demo2_.offsetWidth - demo_.scrollLeft <=0)
                    demo_.scrollLeft -= demo1_.offsetWidth
                else {
                    demo_.scrollLeft++
                }
            }
        </script>
    </div>