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