这是一款效果非常逼真的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

在线预览    源码下载