无间隙图片滚动（向左）

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

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

【一】不利用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>

转载于:https://www.cnblogs.com/oneivan/archive/2011/11/20/2256386.html