项目地址：
https://github.com/luobotang/slide-animation
在 Github 上搜索 presentation/slider 相关的项目，很多，包括像 impress.js 这样 NB 闪闪的工具。
所以，我只是重复造了一个轮子，还是个小轮子。接下来分享下我的思路和实现方法。
最开始是想实现一个类似这样 http://www.smartisan.com/jianguo/#/overview 效果的工具库，用来做页面展示。主要原因是公司网络有点问题，干不了活，有几个小时可以用，名义上也是给后面的工作储备点工具。
基本样式
每一个“片子”都是独占屏幕显示的，这个很简单，用类似下面的 CSS 搞定就行：
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
当然片子有很多，所以放到一个容器里面，让容器 position: fixed 就好，单张片子采用position: abusolute。
幻灯片切换过程状态设计
然后，得让这些片子可以切换啊，还得有个动画效果。切换的话用 JavaScript 来支持，正在显示的片子移走，下一张片子显示出来就是。动画效果考虑用 CSS 来做，不想做很复杂，就用过渡效果实现（CSS transition 属性）。
实际在做的时候，动画效果这里还是花了心思，反复琢磨了很久。倒不是如何实现这个动画效果，因为是用 CSS 写动画效果，难度不大，重点在于 JavaScript 这边的设计。
比如说要移走的片子，直接隐藏？那不就没有动画效果了嘛。通过 JavaScript，或者说用 jQuery 写动画效果实现，倒是可以，但是复杂了，不如用 CSS 写简单，而且可以方便的替换。
所以是在类名上考虑，把两张片子切换的过程通过一系列类名的添加、移除来模拟，由 CSS 具体实现这些状态下的样式。初步定下来的是这些类名，加在片子对应的元素上：
- slide-in
- slide-active
- slide-out
切换时有两张片子，当前的片子本身有类名 slide-active，切换时，移除 slide-active，添加 slide-out；下一张片子在切换时，添加 slide-active 以及 slide-in。在设定的切换过渡时间后，把上一张片子的 slide-out 移除，这样就还原为一张普通的片子，下一张片子移除 slide-in，成为当前显示的片子。在 slide-in 和 slide-out 两个类名下写幻灯片的过渡样式。
不过有个问题！
片子不光是从上往下切换，还可以从下往上啊！slide-in 和 slide-out里面区分不出来方向，所以动画效果区分不出来。
考虑到这个问题，我由给片子加上了 slide-prev 和 slide-next 两个类名，用于区分该片子是在当前显示的片子之前还是之后，这样分别定义了不同的 CSS 样式后，在切换为 slide-active 状态时就可以应用不同的效果了。而 slide-in 和 slide-out 其实不用写什么东西了。
所以，切换过程变成了：
- 向下切换时
- 当前片子
移除slide-active，添加slide-prev、slide-out--> 移除slide-out - 下一张片子
移除slide-next，添加slide-active、slide-in--> 移除slide-in
- 当前片子
- 向上切换时
- 当前片子
移除slide-active，添加slide-next、slide-out--> 移除slide-out - 下一张片子
移除slide-prev，添加slide-active、slide-in--> 移除slide-in
- 当前片子
JavaScript 切换动作实现
切换相关的样式设计完了，再说 JavaScript 这边的实现。
首先是过渡有一个时间，在此期间不影响进一步的操作，让动画先完成。
通过一个状态变量 sliding，一旦开始切换，将其设为 true，再次调用时判断变量值为 true，则不再处理。指定的切换过渡时间后，再将变量值设为 false。
然后是触发切换的方式。
最开始只做了一种，通过鼠标滚轮的上下滚动实现。这个要判断鼠标滚轮的滚动方向，用了之前用过的一个 jQuery 插件 jQuery.mousewheel，所以没花什么力气。绑定的是插件提供的 mousewheel 属性，事件对象的 deltaY 属性值大于 0 就是向上滚动，小鱼 0 则是向下。
后来觉得支持键盘方向键切换也就是顺手的事，也就做了支持，实现也很简单，判断按键呗。jQuery 包装后的事件对象带有 which 属性，判断 which 的值是否对应方向键，然后触发就好。
整合
把上面的东西整合一下，Slider 就完成了，由于借助了 jQuery 和 jQuery.mousewheel，我自己的 JavaScript 代码只有一百多行，CSS 效果的实现是通过 transition，只是在不同状态下设置了不同的位置属性，也没有多少。
小结
重复造轮子也还是挺有趣的，特别的好处之一是，完全满足自己的需求，不需要学习、研究别人写的接口和代码。
只是个小工具，喜欢的话请直接下载使用，也欢迎参与并贡献代码。
