图片跑马灯不连续的问题解析

了解示例以前，先普及几个名词：

offsetWidth：offsetWidth = width + padding + border；

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离;

setInterval:有两个参数，一个是将要执行的代码字符串，还有一个是以毫秒为单位的时间间隔，当过了那个时间段之后就将执行那段代码。setInterval在执行完一次代码之后，经过了那个固定的时间间隔，它还会自动重复执行代码.

原理：每隔设定的时间后，id为demo的div向左移动1个px（scrollLeft++），当移动的长度等于id为demo1的 offsetWidth时，相当于整个id为demo1的div全部隐藏，这时我们看到的其实是demo2，此时将demo的scrollLeft恢复为 初始值，demo1重新向左移动，以此往复。

注：demo1的offsetWidth > demo的offsetWidth，此为关键点 。否则就会出现，往左移动到demo2的最后一张图片出来后就卡住不动的情况。

<div align="center" id="demo">
<div id="demo1">

<img src="xxx.jpg">

<img src="xxx.jpg">

<img src="xxx.jpg">

<img src="xxx.jpg">

<img src="xxx.jpg">

<img src="xxx.jpg">

</div>
<div id="demo2"></div>
</div>
<script language="javascript" type="text/javascript">
<!--
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
var speed = 10; //滚动速度值，值越大速度越慢
demo2.innerHTML = demo1.innerHTML;//克隆demo2为demo1

function Marquee(){
        if(demo2.offsetWidth-demo.scrollLeft<=0){
            demo.scrollLeft-=demo1.offsetWidth;
        }else{
            demo.scrollLeft++;
           
        }
    }

var MyMar = setInterval(Marquee, speed); //设置定时器
demo.onmouseover = function() {
 clearInterval(MyMar);
} //鼠标经过时清除定时器达到滚动停止的目的
demo.onmouseout = function() {
 MyMar = setInterval(Marquee, speed);
} //鼠标移开时重设定时器
-->
</script>