<b>阅读目录</b>
<a href="http://www.cnblogs.com/landeanfen/p/5307330.html#_label0">一、组件预览</a>
<a href="http://www.cnblogs.com/landeanfen/p/5307330.html#_label1">二、代码示例</a>
<a href="http://www.cnblogs.com/landeanfen/p/5307330.html#_label1_0">1、试试手气效果代码</a>
<a href="http://www.cnblogs.com/landeanfen/p/5307330.html#_label1_1">2、简单游戏机效果代码示例</a>
<a href="http://www.cnblogs.com/landeanfen/p/5307330.html#_label1_2">3、单个停止效果代码示例</a>
<a href="http://www.cnblogs.com/landeanfen/p/5307330.html#_label2">三、总结</a>
<b>正文</b>
前言：前两天在网上找组件，无意中发现了我们儿时游戏机效果的“SlotMachine组件”，浏览一遍下来，勾起了博主小时候满满的回忆。于是下定决定要研究下这么一个东西，不得不再次叹息开源社区的强大，原来这些组件已经被封装得这么好了，使用起来如此简单。下面就让博主带着大家来看看这么一个神奇的组件——SlotMachine吧。
先来一发简单的效果压压惊
觉得太简单？别急，好戏在后头，试试手气先。
什么？还没达到想要的效果，好！下面，真实效果来一发。
博主点击了好长时间，都没有中奖，难怪小时候怎么都赢不了呢。博主不信邪，继续点击开始，终于有一次中奖的了，真心不容易。
还有我们年终抽奖效果，开始！停止！
然后来看看文件的引用：
这里需要注意几点：
引用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，下次年会，你都可以做一个抽奖系统了，只要有图片素材，一个字：简单。至此，本篇基本结束。如果本篇也引起了你的共鸣，不妨推荐哈，欢迎园友拍砖~~
本文转自懒得安分博客园博客，原文链接：http://www.cnblogs.com/landeanfen/p/5307330.html，如需转载请自行联系原作者