这是一款效果非常逼真的jQuery模拟水果机特效插件。

安装配置

你可以使用 Bower 阿狸安装这个水果机插件：

$ bower install jquery-slotmachine --save

然后需要在页面的头部引入 jQuery 和 jquery.slotmachine.min.js 文件。

<script type="text/javascript" src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js"></script>
<script src="/path/to/jquery.slotmachine.min.js"></script>

使用方法

使用下面的方法创建一个水果机。

var machine = $(foo).slotMachine( params );

水果机的翻牌效果如下：

machine.shuffle( repeat, onStopCallback ); //No args to make rotate infinitely

选择前一张和后一张图片：

machine.prev(); //Previous element

machine.next(); //Next element

获取选择的元素。

machine.active; //Current element index

获取下一个选择的元素。

machine.futureActive; //Future active element index

检测水果机是否在运行。

machine.isRunning; //Returns boolean

改变旋转结果：如果返回的值超出了范围，则随机选择一个元素。

machine.setRandomize(foo); //foo must be a function (should return int) or an int

可用参数

参数必须是一个对象，是否包含下一个参数是可选的。

  • active：设置第一个元素。 
    active: 0
  • delay：设置自旋动画的时间。 
    delay: 200
  • auto：通过一个整数的毫秒数来使水果机自动运行。 
    repeat: false
  • stopHidden (currently disabled)：如果元素在屏幕的上方或下方则停止动画。 
    stopHidden: true
  • randomize：通过一个函数来选择你自己的随机元素。该函数必须返回一个0（第一个元素）和最大元素之间的整数值。 
    $('#foo').slotMachine({
    randomize : function(activeElementIndex){
        return 0;
    }
});

更多详细信息请参考：https://github.com/josex2r/jQuery-SlotMachine