Question

js图片无缝滚动代码，滚动一周就停了，求解答

<div id="demo">
<div class="indemo">
<div id="demo1">
<div class="box"><a href="/"><img src="{dede:global.cfg_templets_skin/}/images/banner/f1.jpg" width="260" height="350" border="0" /><span>LOGO真丑</span></a> </div>
<div class="box"><a href="/"><img src="{dede:global.cfg_templets_skin/}/images/banner/f2.jpg" width="260" height="350" border="0" /><span>LOGO真丑2</span></a> </div>
<div class="box"><a href="/"><img src="{dede:global.cfg_templets_skin/}/images/banner/f3.jpg" width="260" height="350" border="0" /><span>LOGO真丑3</span></a></div>
<div class="box"><a href="/"><img src="{dede:global.cfg_templets_skin/}/images/banner/f4.jpg" width="260" height="350" border="0" /><span>LOGO真丑4</span></a> </div>
<div class="box"><a href="/"><img src="{dede:global.cfg_templets_skin/}/images/banner/f5.jpg" width="260" height="350" border="0" /><span>LOGO真丑5</span></a> </div>
</div>
<div id="demo2"></div>
</div>
</div>
<script language="javascript">
var speed=5; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
</script>
目前demo宽度是1024
demo1中有5张图片，每张宽度260，demo宽度至少是1300
我增加了图片和减少了图片都没有用。

Answer 1

这是网上找的代码吧,这个代码有BUG,就是如果内容太少,小于滚动容器的滚动距离的话,就无法连续滚动.解决的办法,要么修改代码,要么增加填充的内容到超过出容器.

追问

麻烦您告诉我如何修改这个代码呢？还有这个代码的原理是什么呢，浪费您点时间帮帮我

追答

先说原理,把滚动内容复制一份副本放在当前内容之后,然后定时移动这两组内容,直到第一组内容完全移出可见区域时,将两组内容重置到初始位置继续移动,这样在视觉上会产生连续滚动.
给你个修改思路吧,假设横向滚动,如果内容宽度小于可见区宽度,那么你就需要产生更多的副本,使副本的宽度和大于可见区宽度,这样就可以了.

Answer 2

多放几张图片

追问

麻烦您告诉我这段代码的原理，可以吗？

Answer 3

留个联系方式，我给你传套代码