下面首先要实现图片的无间断滚动，然后还要实现当外框的scrollLeft值正好运动的是一个图片的宽度时，图片会暂停一秒钟之后在继续这个运动，我给img1标签里插入一系列的图片，而img2标签里则是采用innerHTML的方法把img1里面的图片插入img2里，img2最好不要与img1的图片不相同，这样的无间断滚动在两个标签内图片交汇处会有一小段时间的间隔，看下面的代码：
HTML代码：
<div id="out">
<div id="outFlsh">
<div id="img1">
<img src="images/6.gif" alt="动画"/>
<img src="images/7.gif" alt="动画"/>
<img src="images/8.gif" alt="动画"/>
<img src="images/9.gif" alt="动画"/>
<img src="images/10.gif" alt="动画"/>
<img src="images/11.gif" alt="动画"/>
<img src="images/12.gif" alt="动画"/>
<img src="images/13.gif" alt="动画"/>
</div>
<div id="img2">
</div>
</div>
</div>
CSS代码：
#out{width:1200px;height:320px;overflow:hidden;margin:0px auto;margin-top:30px;}
#outFlsh{width:3840px;height:320px;}
#img1,#img2{width:1920px;height:320px;float:left;}
img{border:0px;float:left;width:240px;height:320px;}
JS代码：
<script type="text/javascript">
var img1=document.getElementById('img1');
var img2=document.getElementById('img2');
var out=document.getElementById('out');
var imgs=document.getElementsByTagName('img');
img2.innerHTML=img1.innerHTML;//在img2里面插入img1的内容；
var t1=null;
var t2=null;
function moving()
{
if(out.scrollLeft>img1.offsetWidth)//当滚动条滚动的距离大于包含图片的容器的宽时，滚动条从头开始运动；
{
out.scrollLeft=0;
}
else
{
out.scrollLeft+=5;//当滚动条滚动的距离是在包含着图片的容器宽的范围内时，滚动条按照每25毫秒5px的距离来走；
}
if(out.scrollLeft%imgs[0].offsetWidth==0)//当滚动条滚动的距离与图片的宽度求模，结果为0时，滚动条暂停1s后再运动；
{
clearInterval(t1);
t2=setTimeout('t1=setInterval(moving,25)',1000);
}
}
t1=setInterval(moving,25);
img1.onmouseover=function()//鼠标放上去停止，即清除计时器
{
clearInterval(t1);
clearTimeout (t2);
}
img1.onmouseout=function()//鼠标移走运动，即触发计时器
{
t1=setInterval(moving,25);
}
img2.onmouseover=function()
{
clearInterval(t1);
clearTimeout (t2);
}
img2.onmouseout=function()
{
t1=setInterval(moving,25);
}
</script>