前言：前兩天在網上找元件，無意中發現了我們兒時遊戲機效果的“SlotMachine元件”，浏覽一遍下來，勾起了部落客小時候滿滿的回憶。于是下定決定要研究下這麼一個東西，不得不再次歎息開源社群的強大，原來這些元件已經被封裝得這麼好了，使用起來如此簡單。下面就讓部落客帶着大家來看看這麼一個神奇的元件——SlotMachine吧。
先來一發簡單的效果壓壓驚
覺得太簡單？别急，好戲在後頭，試試手氣先。
什麼？還沒達到想要的效果，好！下面，真實效果來一發。
部落客點選了好長時間，都沒有中獎，難怪小時候怎麼都赢不了呢。部落客不信邪，繼續點選開始，終于有一次中獎的了，真心不容易。
還有我們年終抽獎效果，開始！停止！
既然是js元件，肯定是先要下載下傳元件庫。首先貼上 開源位址
然後來看看檔案的引用：
這裡需要注意幾點：
引用jquery和bootstrap都是通過cdn加速的方式引用的，不懂cdn加速的可以百度。
Jquery元件必須，并且元件需要Jquery 2.0以上版本的支援，版本太低會有js異常。
bootstrap元件并非必須，但是本篇布局需要部分bootstrap的樣式支援。
toastr元件并非必須，此處用于顯示中獎的結果。
html部分
JS部分
JS常用屬性、方法、事件詳解
（1）初始化方法 var machine = $("#id").slotMachine({}); 傳回目前旋轉的對象。slotMachine()方法裡面傳遞初始化的參數，比如
active：表示初始化的時候顯示項的索引，從0開始
delay：切換兩張圖檔的間隔時間（毫秒機關）
auto：是否自動旋轉，取值為true or false
spins：當auto為true的時候，這是每次跳過圖示的個數
stophidden：是否出現開始和停止時候的動畫
randomize:function(activeElementIndex){}此屬性表示每次旋轉後選中值的索引（從0開始）
direction：動畫的方向，取值（up||down）
（2）常用方法
machine.shuffle( repeat, onStopCallback ); 表示開始旋轉，repeat表示每次跳過的圖檔個數；onstopCallback表示旋轉停止後的事件回調方法。
machine.prev(); 傳回前一個元素
machine.next(); 傳回後一個元素
machine.stop(); 停止旋轉
machine.active; 得到選中的元素的索引
machine.running; 檢測是否正在旋轉，true表示正在旋轉
machine.stopping; 檢測是否已經停止
machine.destroy(); 摧毀旋轉節點
Html部分
整個過程并不複雜，所有的屬性、事件、方法基本看看文檔都能很好了解運用，示範代碼也沒什麼好說的，一看就懂。元件本身在一般的系統裡面可能很難有用武之地，本篇作為懷舊之作，以此來紀念我們已經逝去的童年。原來制作一個這種簡單遊戲如此easy，下次年會，你都可以做一個抽獎系統了，隻要有圖檔素材，一個字：簡單。至此，本篇基本結束。如果本篇也引起了你的共鳴，不妨推薦哈，歡迎園友拍磚~~