前端学习＜四＞JavaScript基础——38-offset相关属性和匀速动画（含轮播图的实现）

前言

JS动画的主要内容如下：

1、三大家族和一个事件对象：

三大家族：offset/scroll/client。也叫三大系列。
事件对象/event（事件被触动时，鼠标和键盘的状态）（通过属性控制）。

2、动画(闪现/匀速/缓动)

3、冒泡/兼容/封装

offset 家族的组成

我们知道，JS动画的三大家族包括：offset/scroll/client。今天来讲一下offset，以及与其相关的匀速动画。

offset的中文是：偏移，补偿，位移。

js中有一套方便的获取元素尺寸的办法就是offset家族。offset家族包括：

offsetWidth
offsetHight
offsetLeft
offsetTop
offsetParent

下面分别介绍。

1、offsetWidth 和 offsetHight

offsetWidth 和 offsetHight：获取元素的宽高 + padding + border，不包括margin。如下：

offsetWidth = width + padding + border
offsetHeight = Height + padding + border

这两个属性，他们绑定在了所有的节点元素上。获取元素之后，只要调用这两个属性，我们就能够获取元素节点的宽和高。

举例如下：

<span style="background-color:#f8f8f8"><span style="color:#333333"> <span style="color:#555555"><!DOCTYPE html></span><span style="color:#117700"><</span><span style="color:#117700">html</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">head</span> <span style="color:#0000cc">lang</span>=<span style="color:#aa1111">"en"</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">charset</span>=<span style="color:#aa1111">"UTF-8"</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></</span><span style="color:#117700">title</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">style</span><span style="color:#117700">></span><span style="color:#117700">div</span> {<span style="color:#000000">width</span>: <span style="color:#116644">100px</span>;<span style="color:#000000">height</span>: <span style="color:#116644">100px</span>;<span style="color:#000000">padding</span>: <span style="color:#116644">10px</span>;<span style="color:#000000">border</span>: <span style="color:#116644">10px</span> <span style="color:#221199">solid</span> <span style="color:#221199">#000</span>;<span style="color:#000000">margin</span>: <span style="color:#116644">100px</span>;<span style="color:#000000">background-color</span>: <span style="color:#770088">pink</span>;}<span style="color:#117700"></</span><span style="color:#117700">style</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">div</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"box"</span><span style="color:#117700">></</span><span style="color:#117700">div</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">script</span><span style="color:#117700">></span><span style="color:#770088">var</span> <span style="color:#0000ff">div1</span> <span style="color:#981a1a">=</span> <span style="color:#000000">document</span>.<span style="color:#000000">getElementsByTagName</span>(<span style="color:#aa1111">"div"</span>)[<span style="color:#116644">0</span>];<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">div1</span>.<span style="color:#000000">offsetHeight</span>);          <span style="color:#aa5500">//打印结果：140（100+20+20）</span><span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#770088">typeof</span> <span style="color:#000000">div1</span>.<span style="color:#000000">offsetHeight</span>);   <span style="color:#aa5500">//打印结果：number</span><span style="color:#117700"></</span><span style="color:#117700">script</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span></span></span>

2、offsetParent

offsetParent：获取当前元素的定位父元素。

如果当前元素的父元素，有CSS定位（position为absolute、relative、fixed），那么 offsetParent 获取的是最近的那个父元素。
如果当前元素的父元素，没有CSS定位（position为absolute、relative、fixed），那么offsetParent 获取的是body。

举例：

<span style="background-color:#f8f8f8"><span style="color:#333333"> <span style="color:#555555"><!DOCTYPE html></span><span style="color:#117700"><</span><span style="color:#117700">html</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">head</span> <span style="color:#0000cc">lang</span>=<span style="color:#aa1111">"en"</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">charset</span>=<span style="color:#aa1111">"UTF-8"</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></</span><span style="color:#117700">title</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">div</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"box1"</span> <span style="color:#0000cc">style</span>=<span style="color:#aa1111">"position: absolute;"</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">div</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"box2"</span> <span style="color:#0000cc">style</span>=<span style="color:#aa1111">"position: fixed;"</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">div</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"box3"</span><span style="color:#117700">></</span><span style="color:#117700">div</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">div</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">div</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">script</span><span style="color:#117700">></span><span style="color:#770088">var</span> <span style="color:#0000ff">box3</span> <span style="color:#981a1a">=</span> <span style="color:#000000">document</span>.<span style="color:#000000">getElementsByClassName</span>(<span style="color:#aa1111">"box3"</span>)[<span style="color:#116644">0</span>];<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">box3</span>.<span style="color:#000000">offsetParent</span>);<span style="color:#117700"></</span><span style="color:#117700">script</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span></span></span>

打印结果：

3、offsetLeft 和 offsetTop

offsetLeft：当前元素相对于其定位父元素的水平偏移量。

offsetTop：当前元素相对于其定位父元素的垂直偏移量。

备注：从父亲的 padding 开始算起，父亲的 border 不算在内。

举例：

<span style="background-color:#f8f8f8"><span style="color:#333333"> <span style="color:#555555"><!DOCTYPE html></span><span style="color:#117700"><</span><span style="color:#117700">html</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">head</span> <span style="color:#0000cc">lang</span>=<span style="color:#aa1111">"en"</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">charset</span>=<span style="color:#aa1111">"UTF-8"</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></</span><span style="color:#117700">title</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">style</span><span style="color:#117700">></span><span style="color:#555555">.box1</span> {<span style="color:#000000">width</span>: <span style="color:#116644">300px</span>;<span style="color:#000000">height</span>: <span style="color:#116644">300px</span>;<span style="color:#000000">padding</span>: <span style="color:#116644">100px</span>;<span style="color:#000000">margin</span>: <span style="color:#116644">100px</span>;<span style="color:#000000">position</span>: <span style="color:#221199">relative</span>;<span style="color:#000000">border</span>: <span style="color:#116644">100px</span> <span style="color:#221199">solid</span> <span style="color:#221199">#000</span>;<span style="color:#000000">background-color</span>: <span style="color:#770088">pink</span>;}<span style="color:#555555">.box2</span> {<span style="color:#000000">width</span>: <span style="color:#116644">100px</span>;<span style="color:#000000">height</span>: <span style="color:#116644">100px</span>;<span style="color:#000000">background-color</span>: <span style="color:#770088">red</span>;<span style="color:#aa5500">/*position: absolute;*/</span><span style="color:#aa5500">/*left: 10px;*/</span><span style="color:#aa5500">/*top: 10px;*/</span>}<span style="color:#117700"></</span><span style="color:#117700">style</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">div</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"box1"</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">div</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"box2"</span> <span style="color:#0000cc">style</span>=<span style="color:#aa1111">"left: 10px"</span><span style="color:#117700">></</span><span style="color:#117700">div</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">div</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">script</span><span style="color:#117700">></span><span style="color:#770088">var</span> <span style="color:#0000ff">box2</span> <span style="color:#981a1a">=</span> <span style="color:#000000">document</span>.<span style="color:#000000">getElementsByClassName</span>(<span style="color:#aa1111">"box2"</span>)[<span style="color:#116644">0</span>];<span style="color:#aa5500">//offsetTop和offsetLeft</span><span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">box2</span>.<span style="color:#000000">offsetLeft</span>);  <span style="color:#aa5500">//100</span><span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">box2</span>.<span style="color:#000000">style</span>.<span style="color:#000000">left</span>);  <span style="color:#aa5500">//10px</span><span style="color:#117700"></</span><span style="color:#117700">script</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span></span></span>

在父盒子有定位的情况下，offsetLeft == style.left(去掉px之后)。注意，后者只识别行内样式。但区别不仅仅于此，下面会讲。

offsetLeft 和 style.left 区别

（1）最大区别在于：

offsetLeft 可以返回无定位父元素的偏移量。如果父元素中都没有定位，则body为准。

style.left 只能获取行内样式，如果父元素中都没有设置定位，则返回""（意思是，返回空字符串）;

（2）offsetTop 返回的是数字，而 style.top 返回的是字符串，而且还带有单位：px。

比如：

<span style="background-color:#f8f8f8"><span style="color:#333333"> <span style="color:#000000">div</span>.<span style="color:#000000">offsetLeft</span> <span style="color:#981a1a">=</span> <span style="color:#116644">100</span>;<span style="color:#000000">div</span>.<span style="color:#000000">style</span>.<span style="color:#000000">left</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">"100px"</span>;</span></span>

（3）offsetLeft 和 offsetTop 只读，而 style.left 和 style.top 可读写（只读是获取值，可写是修改值）

总结：我们一般的做法是：用offsetLeft 和 offsetTop 获取值，用style.left 和 style.top 赋值（比较方便）。理由如下：

style.left：只能获取行内式，获取的值可能为空，容易出现NaN。
offsetLeft：获取值特别方便，而且是现成的number，方便计算。它是只读的，不能赋值。

动画的种类

闪现（基本不用）
匀速（本文重点）
缓动（后续重点）

简单举例如下：（每间隔500ms，向右移动盒子100px）

<span style="background-color:#f8f8f8"><span style="color:#333333"> <span style="color:#555555"><!DOCTYPE html></span><span style="color:#117700"><</span><span style="color:#117700">html</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">head</span> <span style="color:#0000cc">lang</span>=<span style="color:#aa1111">"en"</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">charset</span>=<span style="color:#aa1111">"UTF-8"</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></</span><span style="color:#117700">title</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">style</span><span style="color:#117700">></span><span style="color:#117700">div</span> {<span style="color:#000000">width</span>: <span style="color:#116644">100px</span>;<span style="color:#000000">height</span>: <span style="color:#116644">100px</span>;<span style="color:#000000">background-color</span>: <span style="color:#770088">pink</span>;<span style="color:#000000">position</span>: <span style="color:#221199">absolute</span>;}<span style="color:#117700"></</span><span style="color:#117700">style</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">button</span><span style="color:#117700">></span>动画<span style="color:#117700"></</span><span style="color:#117700">button</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">div</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"box"</span> <span style="color:#0000cc">style</span>=<span style="color:#aa1111">"left: 0px"</span><span style="color:#117700">></</span><span style="color:#117700">div</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">script</span><span style="color:#117700">></span><span style="color:#770088">var</span> <span style="color:#0000ff">btn</span> <span style="color:#981a1a">=</span> <span style="color:#000000">document</span>.<span style="color:#000000">getElementsByTagName</span>(<span style="color:#aa1111">"button"</span>)[<span style="color:#116644">0</span>];<span style="color:#770088">var</span> <span style="color:#0000ff">div</span> <span style="color:#981a1a">=</span> <span style="color:#000000">document</span>.<span style="color:#000000">getElementsByTagName</span>(<span style="color:#aa1111">"div"</span>)[<span style="color:#116644">0</span>];<span style="color:#aa5500">//1、闪动</span><span style="color:#aa5500">//    btn.onclick = function () {</span><span style="color:#aa5500">//        div.style.left = "500px";</span><span style="color:#aa5500">//    }</span><span style="color:#aa5500">//2、匀速运动</span><span style="color:#000000">btn</span>.<span style="color:#000000">onclick</span> <span style="color:#981a1a">=</span> <span style="color:#770088">function</span> () {<span style="color:#aa5500">//定时器，每隔一定的时间向右走一些</span><span style="color:#000000">setInterval</span>(<span style="color:#770088">function</span> () {<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">parseInt</span>(<span style="color:#000000">div</span>.<span style="color:#000000">style</span>.<span style="color:#000000">left</span>));<span style="color:#aa5500">//动画原理： 盒子未来的位置 = 盒子现在的位置 + 步长；</span><span style="color:#aa5500">//方法1：用offsetLeft获取值，用style.left赋值。</span><span style="color:#000000">div</span>.<span style="color:#000000">style</span>.<span style="color:#000000">left</span> <span style="color:#981a1a">=</span> <span style="color:#000000">div</span>.<span style="color:#000000">offsetLeft</span> <span style="color:#981a1a">+</span> <span style="color:#116644">100</span> <span style="color:#981a1a">+</span> <span style="color:#aa1111">'px'</span>;<span style="color:#aa5500">// 方法2：必须一开始就在DOM节点上添加 style="left: 0px;"属性，才能用方法2。否则， div.style.left 的值为 NaN</span><span style="color:#aa5500">// div.style.left = parseInt(div.style.left)+100+"px";  //方法2：</span>}, <span style="color:#116644">500</span>);};<span style="color:#117700"></</span><span style="color:#117700">script</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span></span></span>

效果如下：

匀速动画的封装：每间隔30ms，移动盒子10px【重要】

代码如下：

<span style="background-color:#f8f8f8"><span style="color:#333333"> <span style="color:#555555"><!DOCTYPE html></span><span style="color:#117700"><</span><span style="color:#117700">html</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">head</span> <span style="color:#0000cc">lang</span>=<span style="color:#aa1111">"en"</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">charset</span>=<span style="color:#aa1111">"UTF-8"</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></</span><span style="color:#117700">title</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">style</span><span style="color:#117700">></span><span style="color:#555555">.box1</span> {<span style="color:#000000">margin</span>: <span style="color:#116644">0</span>;<span style="color:#000000">padding</span>: <span style="color:#116644">5px</span>;<span style="color:#000000">height</span>: <span style="color:#116644">300px</span>;<span style="color:#000000">background-color</span>: <span style="color:#221199">#ddd</span>;<span style="color:#000000">position</span>: <span style="color:#221199">relative</span>;}<span style="color:#117700">button</span> {<span style="color:#000000">margin</span>: <span style="color:#116644">5px</span>;}<span style="color:#555555">.box2</span> {<span style="color:#000000">width</span>: <span style="color:#116644">100px</span>;<span style="color:#000000">height</span>: <span style="color:#116644">100px</span>;<span style="color:#000000">background-color</span>: <span style="color:#770088">red</span>;<span style="color:#000000">position</span>: <span style="color:#221199">absolute</span>;<span style="color:#000000">left</span>: <span style="color:#116644">195px</span>;<span style="color:#000000">top</span>: <span style="color:#116644">40px</span>;}<span style="color:#555555">.box3</span> {<span style="color:#000000">width</span>: <span style="color:#116644">100px</span>;<span style="color:#000000">height</span>: <span style="color:#116644">100px</span>;<span style="color:#000000">background-color</span>: <span style="color:#770088">yellow</span>;<span style="color:#000000">position</span>: <span style="color:#221199">absolute</span>;<span style="color:#000000">left</span>: <span style="color:#116644">0</span>;<span style="color:#000000">top</span>: <span style="color:#116644">150px</span>;}<span style="color:#117700"></</span><span style="color:#117700">style</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">div</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"box1"</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">button</span><span style="color:#117700">></span>运动到 left = 200px<span style="color:#117700"></</span><span style="color:#117700">button</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">button</span><span style="color:#117700">></span>运动到 left = 400px<span style="color:#117700"></</span><span style="color:#117700">button</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">div</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"box2"</span><span style="color:#117700">></</span><span style="color:#117700">div</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">div</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"box3"</span><span style="color:#117700">></</span><span style="color:#117700">div</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">div</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">script</span><span style="color:#117700">></span><span style="color:#770088">var</span> <span style="color:#0000ff">btnArr</span> <span style="color:#981a1a">=</span> <span style="color:#000000">document</span>.<span style="color:#000000">getElementsByTagName</span>(<span style="color:#aa1111">"button"</span>);<span style="color:#770088">var</span> <span style="color:#0000ff">box2</span> <span style="color:#981a1a">=</span> <span style="color:#000000">document</span>.<span style="color:#000000">getElementsByClassName</span>(<span style="color:#aa1111">"box2"</span>)[<span style="color:#116644">0</span>];<span style="color:#770088">var</span> <span style="color:#0000ff">box3</span> <span style="color:#981a1a">=</span> <span style="color:#000000">document</span>.<span style="color:#000000">getElementsByClassName</span>(<span style="color:#aa1111">"box3"</span>)[<span style="color:#116644">0</span>];<span style="color:#aa5500">//绑定事件</span><span style="color:#000000">btnArr</span>[<span style="color:#116644">0</span>].<span style="color:#000000">onclick</span> <span style="color:#981a1a">=</span> <span style="color:#770088">function</span> () {<span style="color:#aa5500">//如果有一天我们要传递另外一个盒子，那么我们的方法就不好用了</span><span style="color:#aa5500">//所以我们要增加第二个参数，被移动的盒子本身。</span><span style="color:#000000">animate</span>(<span style="color:#000000">box2</span>, <span style="color:#116644">200</span>);<span style="color:#000000">animate</span>(<span style="color:#000000">box3</span>, <span style="color:#116644">200</span>);}<span style="color:#000000">btnArr</span>[<span style="color:#116644">1</span>].<span style="color:#000000">onclick</span> <span style="color:#981a1a">=</span> <span style="color:#770088">function</span> () {<span style="color:#000000">animate</span>(<span style="color:#000000">box2</span>, <span style="color:#116644">400</span>);<span style="color:#000000">animate</span>(<span style="color:#000000">box3</span>, <span style="color:#116644">400</span>);}<span style="color:#aa5500">//【重要】方法的封装：每间隔30ms，将盒子向右移动10px</span><span style="color:#770088">function</span> <span style="color:#0000ff">animate</span>(<span style="color:#0000ff">ele</span>, <span style="color:#0000ff">target</span>) {<span style="color:#aa5500">//要用定时器，先清除定时器</span><span style="color:#aa5500">//一个盒子只能有一个定时器，这样的话，不会和其他盒子出现定时器冲突</span><span style="color:#aa5500">//我们可以把定时器本身，当成为盒子的一个属性</span><span style="color:#000000">clearInterval</span>(<span style="color:#0055aa">ele</span>.<span style="color:#000000">timer</span>);<span style="color:#aa5500">//我们要求盒子既能向前又能向后，那么我们的步长就得有正有负</span><span style="color:#aa5500">//目标值如果大于当前值取正，目标值如果小于当前值取负</span><span style="color:#770088">var</span> <span style="color:#0000ff">speed</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">target</span> <span style="color:#981a1a">></span> <span style="color:#0055aa">ele</span>.<span style="color:#000000">offsetLeft</span> <span style="color:#981a1a">?</span> <span style="color:#116644">10</span> : <span style="color:#981a1a">-</span><span style="color:#116644">10</span>;  <span style="color:#aa5500">//speed指的是步长</span><span style="color:#0055aa">ele</span>.<span style="color:#000000">timer</span> <span style="color:#981a1a">=</span> <span style="color:#000000">setInterval</span>(<span style="color:#770088">function</span> () {<span style="color:#aa5500">//在执行之前就获取当前值和目标值之差</span><span style="color:#770088">var</span> <span style="color:#0000ff">val</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">target</span> <span style="color:#981a1a">-</span> <span style="color:#0055aa">ele</span>.<span style="color:#000000">offsetLeft</span>;<span style="color:#0055aa">ele</span>.<span style="color:#000000">style</span>.<span style="color:#000000">left</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">ele</span>.<span style="color:#000000">offsetLeft</span> <span style="color:#981a1a">+</span> <span style="color:#0055aa">speed</span> <span style="color:#981a1a">+</span> <span style="color:#aa1111">"px"</span>;<span style="color:#aa5500">//移动的过程中，如果目标值和当前值之差如果小于步长，那么就不能在前进了</span><span style="color:#aa5500">//因为步长有正有负，所有转换成绝对值来比较</span><span style="color:#770088">if</span> (<span style="color:#000000">Math</span>.<span style="color:#000000">abs</span>(<span style="color:#0055aa">val</span>) <span style="color:#981a1a"><</span> <span style="color:#000000">Math</span>.<span style="color:#000000">abs</span>(<span style="color:#0055aa">speed</span>)) {<span style="color:#0055aa">ele</span>.<span style="color:#000000">style</span>.<span style="color:#000000">left</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">target</span> <span style="color:#981a1a">+</span> <span style="color:#aa1111">"px"</span>;<span style="color:#000000">clearInterval</span>(<span style="color:#0055aa">ele</span>.<span style="color:#000000">timer</span>);}}, <span style="color:#116644">30</span>)}<span style="color:#117700"></</span><span style="color:#117700">script</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span></span></span>

实现的效果：

上方代码中的方法封装，可以作为一个模板步骤，要记住。其实，这个封装的方法，写成下面这样，会更严谨，更容易理解：（将if语句进行了改进）

<span style="background-color:#f8f8f8"><span style="color:#333333">     <span style="color:#aa5500">//【重要】方法的封装：每间隔30ms，将盒子向右移动10px</span><span style="color:#770088">function</span> <span style="color:#0000ff">animate</span>(<span style="color:#0000ff">ele</span>, <span style="color:#0000ff">target</span>) {<span style="color:#aa5500">//要用定时器，先清除定时器</span><span style="color:#aa5500">//一个盒子只能有一个定时器，这样的话，不会和其他盒子出现定时器冲突</span><span style="color:#aa5500">//我们可以把定时器本身，当成为盒子的一个属性</span><span style="color:#000000">clearInterval</span>(<span style="color:#0055aa">ele</span>.<span style="color:#000000">timer</span>);<span style="color:#aa5500">//我们要求盒子既能向前又能向后，那么我们的步长就得有正有负</span><span style="color:#aa5500">//目标值如果大于当前值取正，目标值如果小于当前值取负</span><span style="color:#770088">var</span> <span style="color:#0000ff">speed</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">target</span> <span style="color:#981a1a">></span> <span style="color:#0055aa">ele</span>.<span style="color:#000000">offsetLeft</span> <span style="color:#981a1a">?</span> <span style="color:#116644">10</span> : <span style="color:#981a1a">-</span><span style="color:#116644">10</span>;  <span style="color:#aa5500">//speed指的是步长</span><span style="color:#0055aa">ele</span>.<span style="color:#000000">timer</span> <span style="color:#981a1a">=</span> <span style="color:#000000">setInterval</span>(<span style="color:#770088">function</span> () {<span style="color:#aa5500">//在执行之前就获取当前值和目标值之差</span><span style="color:#770088">var</span> <span style="color:#0000ff">val</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">target</span> <span style="color:#981a1a">-</span> <span style="color:#0055aa">ele</span>.<span style="color:#000000">offsetLeft</span>;<span style="color:#aa5500">//移动的过程中，如果目标值和当前值之差如果小于步长，那么就不能在前进了</span><span style="color:#aa5500">//因为步长有正有负，所有转换成绝对值来比较</span><span style="color:#770088">if</span> (<span style="color:#000000">Math</span>.<span style="color:#000000">abs</span>(<span style="color:#0055aa">val</span>) <span style="color:#981a1a"><</span> <span style="color:#000000">Math</span>.<span style="color:#000000">abs</span>(<span style="color:#0055aa">speed</span>)) {  <span style="color:#aa5500">//如果val小于步长，则直接到达目的地；否则，每次移动一个步长</span><span style="color:#0055aa">ele</span>.<span style="color:#000000">style</span>.<span style="color:#000000">left</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">target</span> <span style="color:#981a1a">+</span> <span style="color:#aa1111">"px"</span>;<span style="color:#000000">clearInterval</span>(<span style="color:#0055aa">ele</span>.<span style="color:#000000">timer</span>);} <span style="color:#770088">else</span> {<span style="color:#0055aa">ele</span>.<span style="color:#000000">style</span>.<span style="color:#000000">left</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">ele</span>.<span style="color:#000000">offsetLeft</span> <span style="color:#981a1a">+</span> <span style="color:#0055aa">speed</span> <span style="color:#981a1a">+</span> <span style="color:#aa1111">"px"</span>;}}, <span style="color:#116644">30</span>)}</span></span>

代码举例：轮播图的实现

完整版代码如下：（注释已经比较详细）

<span style="background-color:#f8f8f8"><span style="color:#333333"> <span style="color:#555555"><!doctype html></span><span style="color:#117700"><</span><span style="color:#117700">html</span> <span style="color:#0000cc">lang</span>=<span style="color:#aa1111">"en"</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">head</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">http-equiv</span>=<span style="color:#aa1111">"Content-Type"</span> <span style="color:#0000cc">content</span>=<span style="color:#aa1111">"text/html; charset=utf-8"</span><span style="color:#117700">/></span><span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></span>无标题文档<span style="color:#117700"></</span><span style="color:#117700">title</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">style</span> <span style="color:#0000cc">type</span>=<span style="color:#aa1111">"text/css"</span><span style="color:#117700">></span>* {<span style="color:#000000">padding</span>: <span style="color:#116644">0</span>;<span style="color:#000000">margin</span>: <span style="color:#116644">0</span>;<span style="color:#000000">list-style</span>: <span style="color:#221199">none</span>;<span style="color:#000000">border</span>: <span style="color:#116644">0</span>;}<span style="color:#555555">.all</span> {<span style="color:#000000">width</span>: <span style="color:#116644">500px</span>;<span style="color:#000000">height</span>: <span style="color:#116644">200px</span>;<span style="color:#000000">padding</span>: <span style="color:#116644">7px</span>;<span style="color:#000000">border</span>: <span style="color:#116644">1px</span> <span style="color:#221199">solid</span> <span style="color:#221199">#ccc</span>;<span style="color:#000000">margin</span>: <span style="color:#116644">100px</span> <span style="color:#221199">auto</span>;<span style="color:#000000">position</span>: <span style="color:#221199">relative</span>;}<span style="color:#555555">.screen</span> {<span style="color:#000000">width</span>: <span style="color:#116644">500px</span>;<span style="color:#000000">height</span>: <span style="color:#116644">200px</span>;<span style="color:#000000">overflow</span>: <span style="color:#221199">hidden</span>;<span style="color:#000000">position</span>: <span style="color:#221199">relative</span>;}<span style="color:#555555">.screen</span> <span style="color:#117700">li</span> {<span style="color:#000000">width</span>: <span style="color:#116644">500px</span>;<span style="color:#000000">height</span>: <span style="color:#116644">200px</span>;<span style="color:#000000">overflow</span>: <span style="color:#221199">hidden</span>;<span style="color:#000000">float</span>: <span style="color:#221199">left</span>;}<span style="color:#555555">.screen</span> <span style="color:#117700">ul</span> {<span style="color:#000000">position</span>: <span style="color:#221199">absolute</span>;<span style="color:#000000">left</span>: <span style="color:#116644">0</span>;<span style="color:#000000">top</span>: <span style="color:#116644">0px</span>;<span style="color:#000000">width</span>: <span style="color:#116644">3000px</span>;}<span style="color:#555555">.all</span> <span style="color:#117700">ol</span> {<span style="color:#000000">position</span>: <span style="color:#221199">absolute</span>;<span style="color:#000000">right</span>: <span style="color:#116644">10px</span>;<span style="color:#000000">bottom</span>: <span style="color:#116644">10px</span>;<span style="color:#000000">line-height</span>: <span style="color:#116644">20px</span>;<span style="color:#000000">text-align</span>: <span style="color:#221199">center</span>;}<span style="color:#555555">.all</span> <span style="color:#117700">ol</span> <span style="color:#117700">li</span> {<span style="color:#000000">float</span>: <span style="color:#221199">left</span>;<span style="color:#000000">width</span>: <span style="color:#116644">20px</span>;<span style="color:#000000">height</span>: <span style="color:#116644">20px</span>;<span style="color:#000000">background</span>: <span style="color:#221199">#fff</span>;<span style="color:#000000">border</span>: <span style="color:#116644">1px</span> <span style="color:#221199">solid</span> <span style="color:#221199">#ccc</span>;<span style="color:#000000">margin-left</span>: <span style="color:#116644">10px</span>;<span style="color:#000000">cursor</span>: <span style="color:#221199">pointer</span>;}<span style="color:#555555">.all</span> <span style="color:#117700">ol</span> <span style="color:#117700">li</span><span style="color:#555555">.current</span> {<span style="color:#000000">background</span>: <span style="color:#770088">yellow</span>;}<span style="color:#3300aa">#arr</span> {<span style="color:#000000">display</span>: <span style="color:#221199">none</span>;}<span style="color:#3300aa">#arr</span> <span style="color:#117700">span</span> {<span style="color:#000000">width</span>: <span style="color:#116644">40px</span>;<span style="color:#000000">height</span>: <span style="color:#116644">40px</span>;<span style="color:#000000">position</span>: <span style="color:#221199">absolute</span>;<span style="color:#000000">left</span>: <span style="color:#116644">5px</span>;<span style="color:#000000">top</span>: <span style="color:#116644">50%</span>;<span style="color:#000000">margin-top</span>: <span style="color:#116644">-20px</span>;<span style="color:#000000">background</span>: <span style="color:#221199">#000</span>;<span style="color:#000000">cursor</span>: <span style="color:#221199">pointer</span>;<span style="color:#000000">line-height</span>: <span style="color:#116644">40px</span>;<span style="color:#000000">text-align</span>: <span style="color:#221199">center</span>;<span style="color:#000000">font-weight</span>: <span style="color:#221199">bold</span>;<span style="color:#000000">font-family</span>: <span style="color:#aa1111">'黑体'</span>;<span style="color:#000000">font-size</span>: <span style="color:#116644">30px</span>;<span style="color:#000000">color</span>: <span style="color:#221199">#fff</span>;<span style="color:#000000">opacity</span>: <span style="color:#116644">0.3</span>;<span style="color:#000000">border</span>: <span style="color:#116644">1px</span> <span style="color:#221199">solid</span> <span style="color:#221199">#fff</span>;}<span style="color:#3300aa">#arr</span> <span style="color:#3300aa">#right</span> {<span style="color:#000000">right</span>: <span style="color:#116644">5px</span>;<span style="color:#000000">left</span>: <span style="color:#221199">auto</span>;}<span style="color:#117700"></</span><span style="color:#117700">style</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">script</span><span style="color:#117700">></span><span style="color:#000000">window</span>.<span style="color:#000000">onload</span> <span style="color:#981a1a">=</span> <span style="color:#770088">function</span> () {<span style="color:#aa5500">//需求：无缝滚动。</span><span style="color:#aa5500">//思路：赋值第一张图片放到ul的最后，然后当图片切换到第五张的时候</span><span style="color:#aa5500">//     直接切换第六章，再次从第一张切换到第二张的时候先瞬间切换到</span><span style="color:#aa5500">//     第一张图片，然后滑动到第二张</span><span style="color:#aa5500">//步骤：</span><span style="color:#aa5500">//1.获取事件源及相关元素。（老三步）</span><span style="color:#aa5500">//2.复制第一张图片所在的li,添加到ul的最后面。</span><span style="color:#aa5500">//3.给ol中添加li，ul中的个数-1个，并点亮第一个按钮。</span><span style="color:#aa5500">//4.鼠标放到ol的li上切换图片</span><span style="color:#aa5500">//5.添加定时器</span><span style="color:#aa5500">//6.左右切换图片（鼠标放上去隐藏，移开显示）</span><span style="color:#aa5500">//1.获取事件源及相关元素。（老三步）</span><span style="color:#770088">var</span> <span style="color:#0000ff">all</span> <span style="color:#981a1a">=</span> <span style="color:#000000">document</span>.<span style="color:#000000">getElementById</span>(<span style="color:#aa1111">"all"</span>);<span style="color:#770088">var</span> <span style="color:#0000ff">screen</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">all</span>.<span style="color:#000000">firstElementChild</span> <span style="color:#981a1a">||</span> <span style="color:#0055aa">all</span>.<span style="color:#000000">firstChild</span>;<span style="color:#770088">var</span> <span style="color:#0000ff">imgWidth</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">screen</span>.<span style="color:#000000">offsetWidth</span>;<span style="color:#770088">var</span> <span style="color:#0000ff">ul</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">screen</span>.<span style="color:#000000">firstElementChild</span> <span style="color:#981a1a">||</span> <span style="color:#0055aa">screen</span>.<span style="color:#000000">firstChild</span>;<span style="color:#770088">var</span> <span style="color:#0000ff">ol</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">screen</span>.<span style="color:#000000">children</span>[<span style="color:#116644">1</span>];<span style="color:#770088">var</span> <span style="color:#0000ff">div</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">screen</span>.<span style="color:#000000">lastElementChild</span> <span style="color:#981a1a">||</span> <span style="color:#0055aa">screen</span>.<span style="color:#000000">lastChild</span>;<span style="color:#770088">var</span> <span style="color:#0000ff">spanArr</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">div</span>.<span style="color:#000000">children</span>;<span style="color:#aa5500">//2.复制第一张图片所在的li,添加到ul的最后面。</span><span style="color:#770088">var</span> <span style="color:#0000ff">ulNewLi</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">ul</span>.<span style="color:#000000">children</span>[<span style="color:#116644">0</span>].<span style="color:#000000">cloneNode</span>(<span style="color:#221199">true</span>);<span style="color:#0055aa">ul</span>.<span style="color:#000000">appendChild</span>(<span style="color:#0055aa">ulNewLi</span>);<span style="color:#aa5500">//3.给ol中添加li，ul中的个数-1个，并点亮第一个按钮。</span><span style="color:#770088">for</span> (<span style="color:#770088">var</span> <span style="color:#0000ff">i</span> <span style="color:#981a1a">=</span> <span style="color:#116644">0</span>; <span style="color:#0055aa">i</span> <span style="color:#981a1a"><</span> <span style="color:#0055aa">ul</span>.<span style="color:#000000">children</span>.<span style="color:#000000">length</span> <span style="color:#981a1a">-</span> <span style="color:#116644">1</span>; <span style="color:#0055aa">i</span><span style="color:#981a1a">++</span>) {<span style="color:#770088">var</span> <span style="color:#0000ff">olNewLi</span> <span style="color:#981a1a">=</span> <span style="color:#000000">document</span>.<span style="color:#000000">createElement</span>(<span style="color:#aa1111">"li"</span>);<span style="color:#0055aa">olNewLi</span>.<span style="color:#000000">innerHTML</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">i</span> <span style="color:#981a1a">+</span> <span style="color:#116644">1</span>;<span style="color:#0055aa">ol</span>.<span style="color:#000000">appendChild</span>(<span style="color:#0055aa">olNewLi</span>)}<span style="color:#770088">var</span> <span style="color:#0000ff">olLiArr</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">ol</span>.<span style="color:#000000">children</span>;<span style="color:#0055aa">olLiArr</span>[<span style="color:#116644">0</span>].<span style="color:#000000">className</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">"current"</span>;<span style="color:#aa5500">//4.鼠标放到ol的li上切换图片</span><span style="color:#770088">for</span> (<span style="color:#770088">var</span> <span style="color:#0000ff">i</span> <span style="color:#981a1a">=</span> <span style="color:#116644">0</span>; <span style="color:#0055aa">i</span> <span style="color:#981a1a"><</span> <span style="color:#0055aa">olLiArr</span>.<span style="color:#000000">length</span>; <span style="color:#0055aa">i</span><span style="color:#981a1a">++</span>) {<span style="color:#aa5500">//自定义属性，把索引值绑定到元素的index属性上</span><span style="color:#0055aa">olLiArr</span>[<span style="color:#0055aa">i</span>].<span style="color:#000000">index</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">i</span>;<span style="color:#0055aa">olLiArr</span>[<span style="color:#0055aa">i</span>].<span style="color:#000000">onmouseover</span> <span style="color:#981a1a">=</span> <span style="color:#770088">function</span> () {<span style="color:#aa5500">//排他思想</span><span style="color:#770088">for</span> (<span style="color:#770088">var</span> <span style="color:#0000ff">j</span> <span style="color:#981a1a">=</span> <span style="color:#116644">0</span>; <span style="color:#0055aa">j</span> <span style="color:#981a1a"><</span> <span style="color:#0055aa">olLiArr</span>.<span style="color:#000000">length</span>; <span style="color:#0055aa">j</span><span style="color:#981a1a">++</span>) {<span style="color:#0055aa">olLiArr</span>[<span style="color:#0055aa">j</span>].<span style="color:#000000">className</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">""</span>;}<span style="color:#770088">this</span>.<span style="color:#000000">className</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">"current"</span>;<span style="color:#aa5500">//鼠标放到小的方块上的时候索引值和key以及square同步</span><span style="color:#aa5500">//                    key = this.index;</span><span style="color:#aa5500">//                    square = this.index;</span><span style="color:#000000">key</span> <span style="color:#981a1a">=</span> <span style="color:#000000">square</span> <span style="color:#981a1a">=</span> <span style="color:#770088">this</span>.<span style="color:#000000">index</span>;<span style="color:#aa5500">//移动盒子</span><span style="color:#000000">animate</span>(<span style="color:#0055aa">ul</span>, <span style="color:#981a1a">-</span><span style="color:#770088">this</span>.<span style="color:#000000">index</span> <span style="color:#981a1a">*</span> <span style="color:#0055aa">imgWidth</span>);}}<span style="color:#aa5500">//5.添加定时器</span><span style="color:#770088">var</span> <span style="color:#0000ff">timer</span> <span style="color:#981a1a">=</span> <span style="color:#000000">setInterval</span>(<span style="color:#000000">autoPlay</span>, <span style="color:#116644">1000</span>);<span style="color:#aa5500">//固定向右切换图片</span><span style="color:#aa5500">//两个定时器（一个记录图片，一个记录小方块）</span><span style="color:#770088">var</span> <span style="color:#0000ff">key</span> <span style="color:#981a1a">=</span> <span style="color:#116644">0</span>;<span style="color:#770088">var</span> <span style="color:#0000ff">square</span> <span style="color:#981a1a">=</span> <span style="color:#116644">0</span>;<span style="color:#770088">function</span> <span style="color:#0000ff">autoPlay</span>() {<span style="color:#aa5500">//通过控制key的自增来模拟图片的索引值，然后移动ul</span><span style="color:#0055aa">key</span><span style="color:#981a1a">++</span>;<span style="color:#770088">if</span> (<span style="color:#0055aa">key</span> <span style="color:#981a1a">></span> <span style="color:#0055aa">olLiArr</span>.<span style="color:#000000">length</span>) {<span style="color:#aa5500">//图片已经滑动到最后一张，接下来，跳转到第一张，然后在滑动到第二张</span><span style="color:#0055aa">ul</span>.<span style="color:#000000">style</span>.<span style="color:#000000">left</span> <span style="color:#981a1a">=</span> <span style="color:#116644">0</span>;<span style="color:#0055aa">key</span> <span style="color:#981a1a">=</span> <span style="color:#116644">1</span>;}<span style="color:#000000">animate</span>(<span style="color:#0055aa">ul</span>, <span style="color:#981a1a">-</span><span style="color:#0055aa">key</span> <span style="color:#981a1a">*</span> <span style="color:#0055aa">imgWidth</span>);<span style="color:#aa5500">//通过控制square的自增来模拟小方块的索引值，然后点亮盒子</span><span style="color:#aa5500">//排他思想做小方块</span><span style="color:#0055aa">square</span><span style="color:#981a1a">++</span>;<span style="color:#770088">if</span> (<span style="color:#0055aa">square</span> <span style="color:#981a1a">></span> <span style="color:#0055aa">olLiArr</span>.<span style="color:#000000">length</span> <span style="color:#981a1a">-</span> <span style="color:#116644">1</span>) {<span style="color:#aa5500">//索引值不能大于等于5，如果等于5，立刻变为0；</span><span style="color:#0055aa">square</span> <span style="color:#981a1a">=</span> <span style="color:#116644">0</span>;}<span style="color:#770088">for</span> (<span style="color:#770088">var</span> <span style="color:#0000ff">i</span> <span style="color:#981a1a">=</span> <span style="color:#116644">0</span>; <span style="color:#0055aa">i</span> <span style="color:#981a1a"><</span> <span style="color:#0055aa">olLiArr</span>.<span style="color:#000000">length</span>; <span style="color:#0055aa">i</span><span style="color:#981a1a">++</span>) {<span style="color:#0055aa">olLiArr</span>[<span style="color:#0055aa">i</span>].<span style="color:#000000">className</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">""</span>;}<span style="color:#0055aa">olLiArr</span>[<span style="color:#0055aa">square</span>].<span style="color:#000000">className</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">"current"</span>;}<span style="color:#aa5500">//鼠标放上去清除定时器，移开后在开启定时器</span><span style="color:#0055aa">all</span>.<span style="color:#000000">onmouseover</span> <span style="color:#981a1a">=</span> <span style="color:#770088">function</span> () {<span style="color:#0055aa">div</span>.<span style="color:#000000">style</span>.<span style="color:#000000">display</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">"block"</span>;<span style="color:#000000">clearInterval</span>(<span style="color:#0055aa">timer</span>);}<span style="color:#0055aa">all</span>.<span style="color:#000000">onmouseout</span> <span style="color:#981a1a">=</span> <span style="color:#770088">function</span> () {<span style="color:#0055aa">div</span>.<span style="color:#000000">style</span>.<span style="color:#000000">display</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">"none"</span>;<span style="color:#0055aa">timer</span> <span style="color:#981a1a">=</span> <span style="color:#000000">setInterval</span>(<span style="color:#0055aa">autoPlay</span>, <span style="color:#116644">1000</span>);}<span style="color:#aa5500">//6.左右切换图片（鼠标放上去显示，移开隐藏）</span><span style="color:#0055aa">spanArr</span>[<span style="color:#116644">0</span>].<span style="color:#000000">onclick</span> <span style="color:#981a1a">=</span> <span style="color:#770088">function</span> () {<span style="color:#aa5500">//通过控制key的自增来模拟图片的索引值，然后移动ul</span><span style="color:#0055aa">key</span><span style="color:#981a1a">--</span>;<span style="color:#770088">if</span> (<span style="color:#0055aa">key</span> <span style="color:#981a1a"><</span> <span style="color:#116644">0</span>) {<span style="color:#aa5500">//先移动到最后一张，然后key的值取之前一张的索引值，然后在向前移动</span><span style="color:#0055aa">ul</span>.<span style="color:#000000">style</span>.<span style="color:#000000">left</span> <span style="color:#981a1a">=</span> <span style="color:#981a1a">-</span><span style="color:#0055aa">imgWidth</span> <span style="color:#981a1a">*</span> (<span style="color:#0055aa">olLiArr</span>.<span style="color:#000000">length</span>) <span style="color:#981a1a">+</span> <span style="color:#aa1111">"px"</span>;<span style="color:#0055aa">key</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">olLiArr</span>.<span style="color:#000000">length</span> <span style="color:#981a1a">-</span> <span style="color:#116644">1</span>;}<span style="color:#000000">animate</span>(<span style="color:#0055aa">ul</span>, <span style="color:#981a1a">-</span><span style="color:#0055aa">key</span> <span style="color:#981a1a">*</span> <span style="color:#0055aa">imgWidth</span>);<span style="color:#aa5500">//通过控制square的自增来模拟小方块的索引值，然后点亮盒子</span><span style="color:#aa5500">//排他思想做小方块</span><span style="color:#0055aa">square</span><span style="color:#981a1a">--</span>;<span style="color:#770088">if</span> (<span style="color:#0055aa">square</span> <span style="color:#981a1a"><</span> <span style="color:#116644">0</span>) {<span style="color:#aa5500">//索引值不能大于等于5，如果等于5，立刻变为0；</span><span style="color:#0055aa">square</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">olLiArr</span>.<span style="color:#000000">length</span> <span style="color:#981a1a">-</span> <span style="color:#116644">1</span>;}<span style="color:#770088">for</span> (<span style="color:#770088">var</span> <span style="color:#0000ff">i</span> <span style="color:#981a1a">=</span> <span style="color:#116644">0</span>; <span style="color:#0055aa">i</span> <span style="color:#981a1a"><</span> <span style="color:#0055aa">olLiArr</span>.<span style="color:#000000">length</span>; <span style="color:#0055aa">i</span><span style="color:#981a1a">++</span>) {<span style="color:#0055aa">olLiArr</span>[<span style="color:#0055aa">i</span>].<span style="color:#000000">className</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">""</span>;}<span style="color:#0055aa">olLiArr</span>[<span style="color:#0055aa">square</span>].<span style="color:#000000">className</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">"current"</span>;}<span style="color:#0055aa">spanArr</span>[<span style="color:#116644">1</span>].<span style="color:#000000">onclick</span> <span style="color:#981a1a">=</span> <span style="color:#770088">function</span> () {<span style="color:#aa5500">//右侧的和定时器一模一样</span><span style="color:#0055aa">autoPlay</span>();}<span style="color:#770088">function</span> <span style="color:#0000ff">animate</span>(<span style="color:#0000ff">ele</span>, <span style="color:#0000ff">target</span>) {<span style="color:#000000">clearInterval</span>(<span style="color:#0055aa">ele</span>.<span style="color:#000000">timer</span>);<span style="color:#770088">var</span> <span style="color:#0000ff">speed</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">target</span> <span style="color:#981a1a">></span> <span style="color:#0055aa">ele</span>.<span style="color:#000000">offsetLeft</span> <span style="color:#981a1a">?</span> <span style="color:#116644">10</span> : <span style="color:#981a1a">-</span><span style="color:#116644">10</span>;<span style="color:#0055aa">ele</span>.<span style="color:#000000">timer</span> <span style="color:#981a1a">=</span> <span style="color:#000000">setInterval</span>(<span style="color:#770088">function</span> () {<span style="color:#770088">var</span> <span style="color:#0000ff">val</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">target</span> <span style="color:#981a1a">-</span> <span style="color:#0055aa">ele</span>.<span style="color:#000000">offsetLeft</span>;<span style="color:#0055aa">ele</span>.<span style="color:#000000">style</span>.<span style="color:#000000">left</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">ele</span>.<span style="color:#000000">offsetLeft</span> <span style="color:#981a1a">+</span> <span style="color:#0055aa">speed</span> <span style="color:#981a1a">+</span> <span style="color:#aa1111">"px"</span>;<span style="color:#770088">if</span> (<span style="color:#000000">Math</span>.<span style="color:#000000">abs</span>(<span style="color:#0055aa">val</span>) <span style="color:#981a1a"><</span> <span style="color:#000000">Math</span>.<span style="color:#000000">abs</span>(<span style="color:#0055aa">speed</span>)) {<span style="color:#0055aa">ele</span>.<span style="color:#000000">style</span>.<span style="color:#000000">left</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">target</span> <span style="color:#981a1a">+</span> <span style="color:#aa1111">"px"</span>;<span style="color:#000000">clearInterval</span>(<span style="color:#0055aa">ele</span>.<span style="color:#000000">timer</span>);}}, <span style="color:#116644">10</span>)}}<span style="color:#117700"></</span><span style="color:#117700">script</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">div</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"all"</span> <span style="color:#0000cc">id</span>=<span style="color:#aa1111">'all'</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">div</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"screen"</span> <span style="color:#0000cc">id</span>=<span style="color:#aa1111">"screen"</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">ul</span> <span style="color:#0000cc">id</span>=<span style="color:#aa1111">"ul"</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">><</span><span style="color:#117700">img</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"images/1.jpg"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"500"</span> <span style="color:#0000cc">height</span>=<span style="color:#aa1111">"200"</span><span style="color:#117700">/></</span><span style="color:#117700">li</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">><</span><span style="color:#117700">img</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"images/2.jpg"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"500"</span> <span style="color:#0000cc">height</span>=<span style="color:#aa1111">"200"</span><span style="color:#117700">/></</span><span style="color:#117700">li</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">><</span><span style="color:#117700">img</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"images/3.jpg"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"500"</span> <span style="color:#0000cc">height</span>=<span style="color:#aa1111">"200"</span><span style="color:#117700">/></</span><span style="color:#117700">li</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">><</span><span style="color:#117700">img</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"images/4.jpg"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"500"</span> <span style="color:#0000cc">height</span>=<span style="color:#aa1111">"200"</span><span style="color:#117700">/></</span><span style="color:#117700">li</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">><</span><span style="color:#117700">img</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"images/5.jpg"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"500"</span> <span style="color:#0000cc">height</span>=<span style="color:#aa1111">"200"</span><span style="color:#117700">/></</span><span style="color:#117700">li</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">ul</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">ol</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">ol</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">div</span> <span style="color:#0000cc">id</span>=<span style="color:#aa1111">"arr"</span><span style="color:#117700">></span><span style="color:#117700"><</span><span style="color:#117700">span</span> <span style="color:#0000cc">id</span>=<span style="color:#aa1111">"left"</span><span style="color:#117700">><</span><span style="color:#117700"></span></span><span style="color:#117700"><</span><span style="color:#117700">span</span> <span style="color:#0000cc">id</span>=<span style="color:#aa1111">"right"</span><span style="color:#117700">></span>><span style="color:#117700"></</span><span style="color:#117700">span</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">div</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">div</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">div</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span><span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span></span></span>

实现效果：