jQuery+SlotMachine插件实现老虎机抽奖

收藏

群里经常有人要老虎机的特效。今天百度发现了这款抽奖特效，今天整理了三个老虎机演示效果分享给大家。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

首先我们先放置三个老虎机：

<div id="machine1" class="slotMachine">
    <div class="slot slot1"></div>
    <div class="slot slot2"></div>
    <div class="slot slot3"></div>
    <div class="slot slot4"></div>
    <div class="slot slot5"></div>
    <div class="slot slot6"></div>
</div>
<div id="machine2" class="slotMachine">
    <div class="slot slot1"></div>
    <div class="slot slot2"></div>
    <div class="slot slot3"></div>
    <div class="slot slot4"></div>
    <div class="slot slot5"></div>
    <div class="slot slot6"></div>
</div>
<div id="machine3" class="slotMachine">
    <div class="slot slot1"></div>
    <div class="slot slot2"></div>
    <div class="slot slot3"></div>
    <div class="slot slot4"></div>
    <div class="slot slot5"></div>
    <div class="slot slot6"></div>
</div>

接着引入jQuery库和slotmachine插件：

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js/jquery.slotmachine.js"></script>

jQuery

老虎机初始化

var machine1 = $("#machine1").slotMachine({ //第一个老虎机设置
    active: 0,
    //初始化时显示第几张图案
    delay: 500 //延迟
});

var machine2 = $("#machine2").slotMachine({
    active: 1,
    delay: 500
});

var machine3 = $("#machine3").slotMachine({
    active: 2,
    delay: 500
});

回调函数onComplete

function onComplete($el, active) { //抽奖回调
    switch ($el[0].id) {
    case 'machine1':
        $("#machine1Result").html("<span class='red'>" + active.index + "</span>");
        break;
    case 'machine2':
        $("#machine2Result").html("<span class='red'>" + active.index + "</span>");
        break;
    case 'machine3':
        $("#machine3Result").html("<span class='red'>" + active.index + "</span>");
        break;
    }
}

抽奖按钮点击事件触发：

$("#slotMachineButton1").click(function() { //开始抽奖
    machine1.shuffle(3, onComplete); //调用第一个老虎机
    setTimeout(function() { //500秒后调用第二个老虎机
        machine2.shuffle(3, onComplete);
    },
    500);
    setTimeout(function() { //1000秒后调用第三个老虎机
        machine3.shuffle(3, onComplete);
    },
    1000);
})