如何用JavaScript编写带动画效果的时间轴长尾词示例代码？

本文共计10670个文字，预计阅读时间需要43分钟。

在文章《用 JSX 实现 Carousel 轮播组件》中，我们实现了一个基础的轮播组件。为什么称其为基础呢？因为它已经可以满足我们轮播组件的基本功能，但尚未包含更多高级特性。

上一篇文章《用 JSX 实现 Carousel 轮播组件》中，我们实现了一个 “基础” 的轮播组件。为什么我们叫它 “基础” 呢？因为其实它看起来已经可以满足我们轮播组件的功能，但是其实它还有很多缺陷我们是没有去完善的。

虽然我们已经在里面实现了两个功能，一是可以自动轮播，二是可以手势拖拽。但是其实它离一个真正意义上的可用程度还是有很远的距离的。

首先我们的自动轮播和拖拽是无法无缝连接的，也就是说当我们拖拽结束后，我们的轮播应该继续自动轮播的。这一点我们是还没有实现的。我们的拖拽本身也是有细节上的问题的，比方说它目前只支持鼠标的拖拽事件，并不支持触屏的拖拽，这个也是我们在网页研发过程中必须要去面对的问题。

第二我们动画是使用 CSS Animation 实现的，也不具备任何的自定义和相应变化的。

所以接下来我们来一起实现我们的动画库，但是实现动画库之前，我们需要拥有一个动画库中的时间轴库。这篇文章我们先来看看怎么去实现一个时间轴类，和一个基础的动画类来使用这个时间轴。

代码整理

首先我们发现之前写的 Carousel 组件的代码已经很复杂了，所以我们需要封装一下它，这里我们就把它独立放入一个 JavaScript 文件中。

在项目根目录，建立一个 carousel.js，然后把我们 main.js 中 carousel 组件相关的代码都移动到 carousel.js 中。