定时器
JavaScript 中实现运动需要使用定时器函数 setInterval()。这是一个 JavaScript 内置的函数，可以
让某一个函数自动以指定的毫秒数间隔运行。
例如：
<script type="text/javascript">
var a = 0;
setInterval(function(){
console.log(a++);
},1000);
</script>
打开浏览器控制台，控制台中将每 1 秒钟输出一个数字，并且永不停止，自动运行。
setInterval()需要两个参数：第 1 个参数是一个函数，即要被自动执行的函数；第 2 个参数用来设置函
数的自动运行间隔时间，单位是毫秒，1000 毫秒是 1 秒。
需要注意的是，虽然我们可以将 setInterval()的第二个参数设置为 1，即希望函数每 1 毫秒执行一次，
但是浏览器的渲染能力能力并没有那么强，所以一般间隔毫秒数最少设置为 10 以上。
定时器是 JavaScript 的特色，事实上 setInterval()函数是 window 对象的方法，window 对象是 BOM（浏览器对象模式）的重要对象。也就是说，定时器是 BOM 提供给 JavaScript 使用的，非常的方便。
使用定时器实现运动
使用定时器可以让盒子进行运动：盒子以非常短的间隔时间改变自己的 left 值，利用人眼的“视觉暂留”
效应，从而实现运动。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: orange;
position: relative;
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
var x = 0;
var oBox = document.getElementById("box");
setInterval(function(){
x++;
oBox.style.left = x + "px";
},20);
</script>
</body>
</html>
为了让盒子运动，必须给盒子设置相对定位或者绝对定位。设置信号量 x 表示当前盒子的 left 值，让定时
器每 20 毫秒改变信号量的值，并且设置盒子的 left 为 x 值。
函数每 20 毫秒执行一次，所以盒子将每秒移动 50 次。如果想让盒子移动的更快，注意不要缩小定时器的
间隔时间，因为前文说过浏览器的渲染能力没有那么强，我们应该设置信号量的改变量更大，比如 x+=2 等。
打开浏览器查看页面效果，盒子开始匀速运动
实例学习：无缝连续滚动
实现机理
无缝连续滚动特效是网页中用于广告展示或图片展示的常用特效。它是指一排图片连续从右向左进行动画，
首尾相接永远不停、从不间断。当用户鼠标触碰它的时候，滚动会暂时停止。用户鼠标移开，滚动继续
让元素进行运动不难，但是如何让它周而复始的运动呢？
很多 JavaScript 特效都像魔术，会用一些“小把戏”去实现效果。无缝连续滚动的“小把戏”是：将图片
队列复制一份排在原来的图片队列之后，当第二个图片队列的首张图片到达容器左边的时候，立即将整个图片序
列瞬间移回初始的位置，继续动画，从而形成图片首尾相接、永远不停的错觉。
无缝连续滚动本质上是一个机械反复运动，但是由于瞬间移动的时候画面展示的和持续运动的画面是一样的，
所以用户察觉不到这种机械反复，而是会认为是在进行连续滚动动画。
