項目地址：
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，只是在不同狀態下設置了不同的位置屬性，也沒有多少。
小結
重復造輪子也還是挺有趣的，特別的好處之一是，完全滿足自己的需求，不需要學習、研究別人寫的接口和代碼。
只是個小工具，喜歡的話請直接下載使用，也歡迎參與并貢獻代碼。
