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

于 2024-04-20 10:45:28 发布
阅读量972 收藏 10
点赞数 27
分类专栏： 前端学习基础-HTML+CSS+JavaScript 文章标签： 前端 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76926204/article/details/137993244
版权

前言

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>

实现效果：

温馨提示：动图太大，可以把http://img.smyhvae.com/20180202_2020.gif单独在浏览器中打开。

工程文件：2018-02-02-JS动画实现轮播图.rar

我的公众号

想学习更多技能？不妨关注我的公号：猿小馆

写在最后：希望大家可以点个关注点个赞，这对up真的很重要！谢谢！
被瞧不起的神
关注
专栏目录
offsetwidth详解_offsetWidth和它的兄弟姐妹们
weixin_39905500的博客
12-01 2万+
我们在取元素的宽度时脑海里就能想起如offsetWidth、 clientWidth、 scrollWidth 、style.width，那它们有什么区别呢？先看一下官方定义：一、HTMLElement.offsetWidth是一个只读属性，返回一个元素的布局宽度。一个典型的（译者注：各浏览器的offsetWidth可能有所不同）offsetWidth是测量包含元素的边框(border)、水平线上...
三大系列：offset，scroll，client
weixin_47450807的博客
03-07 1225
一、写在前面 之前一直对于offset，scroll, client这几大属性表示很懵，今天一文针对这些属性进行总结，从此再也不懵逼。 二、offset系列 1、offsetWidth属性 offsetWidth返回当前的元素宽度，这个宽度包括内容的宽度 + border的宽度 + padding的宽度。 offsetWidth是只读属性 2、offsetHeight属性 offsetHeight返回的是当前元素的高度，这个高度包括内容的高度 + border的高度 + offsetHeight是只读属性
你必须知道的 clientWidth, offsetWidth, scrollWidth.
fang_my的博客
02-12 4199
这三个属性所对应的和都是同样的道理，在这里就不重复赘述了，希望读者可以自己举一反三自行推导这三个属性代表什么意思。从学习这几个属性的过程中才真正体会到：“看一千遍文档，不如自己动手实践一遍”的道理。还希望大家也可以跟着自己敲一敲，真的不难。与君共勉才是我写这篇文章的初衷～
详解DOM对象中clientWidth、offsetWidth等属性
热门推荐
葉無聞
04-17 1万+
我们有时需要获得鼠标在某盒子中的位置，或者是随意移动某盒子的位置，在这些场景中我们可能经常需要用到clientWidth、offsetWidth、offsetTop啊等等。但是对于初学者来说（包括我），看到这些就头疼，因为感觉意思都相近，但作用却不同，所以今天天我就来捋一捋，搞清楚，后面好干活。好吧，废话不多说，开始吧。 先上一下示例代码，下面要用到。 HTML: ...
前端学习笔记（21）之JS中的offsetWidth、offsetHeight、clientWidth、clientHeight等等的详细介绍
前端下午茶
08-19 803
offsetWidth //返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距） offsetHeight //返回元素的高度（包括元素高度、内边距和边框，不包括外边距） clientWidth //返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距） clientHeight //返回元素的高度（包括元素高度、内边距，不包括边框和外边距） style.width //返回元素的宽度（包括元素宽度，不包括内边距、边框和外边距） st
前端JavaScript实现轮播图效果
04-11
最后，我们需要编写JavaScript代码来实现轮播图的动态切换和交互功能。在`slide.js`文件中，我们可以创建一个定时器来自动切换图片，并添加点击事件来允许用户手动切换。以下是一个基本的实现： ```javascript let ...
头歌教学实践平台 Web前端开发基础 JavaScript学习手册十四：HTML DOM-文档元素的操作（二）
01-20
这篇教程——"JavaScript学习手册十四：HTML DOM-文档元素的操作（二）"深入探讨了如何使用JavaScript来操纵HTML文档中的元素，进一步提升网页动态性和交互性。 DOM是HTML和XML文档的一种结构化表示，它将网页内容...
《Web前端设计基础——HTML5、CSS3、JavaScript》课后答案整理.pdf
06-10
根据提供的文件内容，我们可以整理出以下Web前端设计基础的知识点： ...它具有更快的访问速度、更好的...对于其他章节，如CSS和JavaScript相关的知识点没有包含在内，这部分知识需要通过学习其他章节的课后答案来补充。
原生JS实现匀速图片轮播动画
10-21
原生JS实现匀速图片轮播动画的知识点涵盖了前端开发中经常遇到的图片轮播需求。在本内容中，我们将详细讨论使用纯JavaScript来创建一个图片轮播功能，并实现匀速动画效果。 ### 1. HTML结构布局 为了实现图片轮播，...
前端-JavaScript-PC端轮播图
09-26
JavaScript是前端开发中不可或缺的一部分，尤其在创建交互式的网页元素如轮播图时，它的功能尤为重要。PC端轮播图是一种常见的网页设计元素，用于展示多张图片或内容，通过动态切换来达到视觉上的连贯效果。下面我们...
三大家族scroll、offset、client
梅花寺
03-08 715
三大家族区别offset家族 offsetHeight: 元素高，height+border+padding offsetWidth: 元素宽，width+border+padding offsetTop: 上边距离带有定位的父盒子的距离（重要） offsetLeft: 左边距离带有定位的父盒子的距离（重要） offsetParent: 最近的带有定位的父盒子。
js进阶：offset家族 Scroll家族 client家族
WZios的博客
03-29 5290
offset家族 1.1  三大家族和一个事件对象 三大家族（offset/scroll/client） 事件对象/event   （事件被触动时，鼠标和键盘的状态）（通过属性控制） 1.2  Offset家族简介 offset这个单词本身是--偏移，补偿，位移的意思。 js中有一套方便的获取元素尺寸的办法就是offset家族； offsetWidth和offsetHight 以及
CSS常用的属性offsetHeight、offsetTop、clientY、offsetY、scrollTOp、scrollHeight、clientWidth
qq_47099087的博客
07-13 1850
结论：1、在content-box下：offsetWidth / offsetHeight = width / height + padding + border2、在border-box下：offsetWidth / offsetHeight = width / height。
offsetWidth、clientWidth、scrollWidth 的区别
weixin_64433668的博客
01-24 884
讲解了 offsetWidth、clientWidth、scrollWidth 这三者的区别
Web前端之 offsetWidth，clientWidth，scrollWidth，offsetLeft，clientLeft，scrollLeft
菜鸟程序员成长路
10-18 1141
  二、涉及问题和总体概括：          如果你对width，offsetWidth，clientWidth，scrollWidth，offsetLeft，clientLeft，scrollLeft这几个的差别还不是很熟悉，那你最好翻阅资料搞清楚， 当然，你也可以看一下本文（虽然写的很差劲）；这几个概念，你会在开发的时候经常用到，因此，掌握还是很有必要的。         首先来说一...
JavaScript-offset家族
可可的博客
12-02 1118
JavaScript-offset家族
网页宽高clientWidth、offsetWidth、offsetTop 、offsetLeft宽高解析
林中明月间丶
05-18 3878
offsetLeft[Top]:只读 属性 当前元素到定位父级的距离（偏移值）到当前元素offsetLeft的距离 style.width:样式宽 clientWidth:样式宽+padding(可视区宽)（如果有滚动条还要包括滚动条的宽度） offsetWidth:样式宽+padding(可视区宽)+border(边框)、(不包括margin) scrollWidt......
Vue(6)，web前端开发的面试题
最新发布
2301_76190672的博客
04-11 724
3、实践练习二、输入组件1、输入框组件使用输入框组件是通过鼠标或键盘输入内容，是最基础的表单域的包装。一般在以下情况使用：需要用户输入表单域内容时。提供组合型输入框，带搜索的输入框，还可以进行大小选择。| addonAfter | 设置带后置标签的输入框 || addonBefore | 设置带前置标签的输入框 || defaultValue | 输入框默认内容 || disabled | 是否禁用状态，默认为false || id | 输入框的唯一标示 |
动画中的offset、client、scroll 系列
The_over的博客
03-27 89
offsetHeight: height + 上下的padding + 上下的border。offsetWidth: width + 左右的padding + 左右的border。scrollWidth: width + 滚动条滚动的距离。offsetTop: 元素距离父元素上侧的距离。offsetLeft: 元素距离父元素左侧的距离。offsetLeft: 元素距离左侧浏览器的距离。offsetTop: 元素距离上侧浏览器的距离。scrollTop: 上下滚动条滚动的距离。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

被瞧不起的神

谢谢啦，感谢支持|一起努力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值