有了动画结果属性，我们就可以在 JavaScript 中插手我们的按时器，让我们的图片在每三秒钟切换一次图片。我们利用 setInerval() 这个函数就可以办理这个问题了。
可是我们怎么才气让图片轮播，可能移动呢？想到 HTML 中的移动，各人有没有想到 CSS 傍边有什么属性可以让我们移动元素的呢？
对没错，就是利用 transform，它就是在 CSS 傍边专门用于挪动元素的。所以这里我们的逻辑就是，每 3 秒往左边挪动一次元素自身的长度，这样我们就可以挪动到下一张图的开始。
可是这样只能挪动一张图，所以假如我们需要挪动第二次，达到第三张图，我们就要让每一张图偏移 200%，以此类推。所以我们需要一个当前页数的值，叫做 current，默认值为 0。每次挪动的时候时就加一，这样偏移的值就是 − 100 × 页 数 -100\times页数 −100×页数。这样我们就完成了图片多次移动，一张一张图片展示了。
class Carousel extends Component { // 结构函数 // 建设 DOM 节点 constructor() { super(); this.attributes = Object.create(null); } setAttribute(name, value) { this.attributes[name] = value; } render() { this.root = document.createElement('div'); this.root.classList.add('carousel'); for (let picture of this.attributes.src) { let child = document.createElement('div'); child.style.backgroundImage = `url('${picture}')`; this.root.appendChild(child); } let current = 0; setInterval(() => { let children = this.root.children; ++current; for (let child of children) { child.style.transform = `translateX(-${100 * current}%)`; } }, 3000); return this.root; } mountTo(parent) { parent.appendChild(this.render()); } }
这里我们发明一个问题，这个轮播是不会遏制的，一直往左偏移没有遏制。而我们需要轮播到最后一张的时候是回到一张图的。
要办理这个问题，我们可以操作一个数学的能力，假如我们想要一个数是在 1 到 N 之间不绝轮回，我们就让它对 n 取余就可以了。在我们元素中，children 的长度是 4，所以当我们 current 达到 4 的时候， 4 ÷ 4 4\div4 4÷4 的余数就是 0，所以每次把 current 配置成 current 除以 children 长度的余数就可以到达无限轮回了。
这里 current 就不会高出 4， 达到 4 之后就会回到 0。
用这个逻辑来实现我们的轮播，确实能让我们的图片无限轮回，可是假如我们运行一下看看的话，我们又会发明别的一个问题。当我们播放到最后一个图片之后，就会快速滑动到第一个张图片，我们会看到一个快速回退的结果。这个确实不是那么好，我们想要的结果是，达到最后一张图之后，第一张图就直接在后头接上。
那么我们就一起去实验办理这个问题，颠末调查其实在屏幕上一次最多就只能看到两张图片。那么其实我们就把这两张图片挪到正确的位置就可以了。
所以我们需要找到当前看到的图片，尚有下一张图片，然后每次移动到下一张图片就找到再下一张图片，把下一张图片挪动到正确的位置。
讲到这里大概照旧有点懵，可是没干系，我们来整理一下逻辑。
获取当前图片 index 和 下一张图的 index
首先轮播必定是从第一张图开始，而这张图在我们的节点中必定是第 0 个
因为我们需要在看到一张图的时候就筹备第二张图，所以我们就需要找到下一张图的位置
按照我们上面说的，下一张图的位置，我们可以利用数学里的能力来得到： 下 一 张 图 的 位 置 = （ 当 前 位 置 + 1 ） ÷ 图 片 数 量 下一张图的位置 = （当前位置 + 1）\div 图片数量下一张图的位置=（当前位置+1）÷图片数量 的余数，按照这个公式，当我们到达图片最后一张的时候，就会返回 0，回到第一个图片的位置
计较图片移动的间隔，保持当前图片后头有一张图片等着被挪动过来
当前显示的图片的位置必定是对的，所以我们是不需要计较的
可是下一张图片的位置就需要我们去挪动它的位置，所以这里我们需要计较这个图片需要偏移的间隔
每一个图片移动一格的间隔就是便是它自身的长度，加上往左移动是负数，所以每往左边移动一个格就是 -100%
图片的 index 是从 0 到 n 的，假如我们用它们地址的 index 作为它们间隔当前图片相差的图片数，我们就可以用 index * -100%，这样就可以把每一张图片移动到当前图片的位置。
可是我们需要的是先把图片移动到当前图片的下一位的位置，所以下一位的地址位置是 index - 1 的图片间隔，也就是说我们要移动的间隔是 (index - 1) * -100%
让第二张图就位的这个行动，我们不需要它呈现任何动画结果，所以在这个进程中我们需要克制图片的动画结果，那就要清楚 transition
第二张图就位，就可以开始执行轮播结果
因为上面我们需要至少一帧的图片移动时间，所以执行轮播结果之前需要一个 16 毫秒的延迟 （因为 16 毫秒恰好是欣赏器一帧的时间）
首先把行内标签中的 transition 从头开启，这样我们 CSS 中的动效就会从头起效，因为接下来的轮播结果是需要有动画结果的