当前位置：首页 > 全部内容 > 正文

jQuery SlotMachine组件实现老虎机抽奖效果详解

作者：橙子

时间：2026-10-30

浏览：557

本文介绍了一款名为SlotMachine的jQuery组件，用于实现经典的图片切换与老虎机抽奖效果。文章详细讲解了组件的引入方式、核心配置参数（如active、delay、randomize）、常用方法（shuffle、stop等）以及三个不同复杂度的代码示例，帮助开发者快速构建前端互动抽奖界面。

文章目录

前言：日前在网络上检索组件资源时，偶然发现了一款能还原儿时游戏机视觉效果的“SlotMachine组件”。浏览其功能演示后，不禁唤起了童年时期的美好回忆。

接下来，我们将一起深入了解这款功能独特的组件——SlotMachine的具体用法。

组件效果预览

一、组件效果预览

首先展示一个基础的效果示例，让大家直观感受。

组件效果预览

如果觉得基础效果过于简单，别着急，更丰富的互动效果还在后面，不妨先尝试一下手气。

组件效果预览

如果上述效果尚未满足需求，请看下面这个更贴近真实场景的演示。

组件效果预览

经过多次点击均未中奖，这让人想起小时候游戏机难以获胜的情景。抱着不服输的心态继续尝试，终于有一次成功中奖，过程确实颇具挑战性。

组件效果预览

此外，该组件还支持年终抽奖等复杂场景，支持一键开始与停止控制。

组件效果预览

代码实现示例

二、代码实现示例

作为基于JavaScript的组件，使用前需先获取组件库。以下是该组件的开源地址。

组件效果预览

接着查看项目中对相关文件的引用配置：

具体代码引用如下：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href="~/Content/jQuery-SlotMachine-master/dist/jquery.slotmachine.css" rel="stylesheet" />
<link href="~/Content/jQuery-SlotMachine-master/css/style.css" rel="stylesheet" />
<link href="~/Content/toastr/toastr.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
 <script src="~/Content/jQuery-SlotMachine-master/dist/jquery.slotmachine.js"></script>
 <script src="~/Content/toastr/toastr.min.js"></script>

在引入资源时，需注意以下几点事项：

1）、jQuery和Bootstrap均通过CDN加速方式引入，若对CDN加速机制不熟悉，建议查阅相关资料。 2）、jQuery组件为必须引用项，且要求jQuery版本在2.0以上，若版本过低可能导致JavaScript执行异常。 3）、Bootstrap组件非强制要求，但本文中的布局样式依赖Bootstrap的部分CSS支持。 4）、toastr组件非强制要求，此处仅用于展示中奖结果的提示信息。 1、试试手气效果代码 html部分


<div id="triky">
 <div class="content" style="text-align: center">
  <h1>请选择你想吃的食物</h1>

  <div class="row">
  <div style="margin: auto;">
   <div id="triky1">
   <div>
    <img src="/Content/jQuery-SlotMachine-master/img/cookie.png" />
   </div>
   <div>
    <img src="/Content/jQuery-SlotMachine-master/img/food1.jpg" />
   </div>
   <div>
    <img src="/Content/jQuery-SlotMachine-master/img/food2.jpg" />
   </div>
   <div>
    <img src="/Content/jQuery-SlotMachine-master/img/food3.jpg" />
   </div>
   </div>
   <div>
   <div class="btn-group btn-group-justified btn-group-triky" style="margin-left:-15px" role="group">
    <div id="trikyShuffle" type="button" class="btn btn-primary btn-lg">试试手气</div>
   </div>
   </div>
  </div>
  </div>
 </div>

 <div class="clearfix"></div>
 </div>

JS部分


$(function () {
  //试试手气
  var triky = $("#triky1").slotMachine({
  active: 2, //初始化的时候显示的项的索引
  //delay: 150,//切换两张图片的间隔时间（毫秒单位）
  //randomize: function () {
  // return 0;//每次旋转后选中值的索引（从0开始）
  //}
  });

  $("#trikyShuffle").click(function () {
  triky.shuffle(8);//开始旋转方法，参数8表示每次旋转跳过8个图标
  });
 });

核心API详解

JS常用属性、方法、事件详解

（1）初始化方法 var machine = $("#id").slotMachine({}); 该方法返回当前旋转对象的实例。slotMachine()方法内部可传递初始化参数，例如：

active：表示初始化时显示的项索引，从0开始计数 delay：切换两张图片的间隔时间（单位：毫秒） auto：是否启用自动旋转，取值为true或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(); 销毁旋转节点实例 2、简单游戏机效果代码示例 html部分


<div id="randomize">
 <div class="content container" style="text-align: center;max-width: 900px;">
  <h1>简易游戏机</h1>

  <div class="row">
  <div class="col-xs-4">
   <div>
   <div id="machine1" class="randomizeMachine">
    <div><img src="/Content/jQuery-SlotMachine-master/img/slot1.png" /></div>
    <div><img src="/Content/jQuery-SlotMachine-master/img/slot2.png" /></div>
    <div><img src="/Content/jQuery-SlotMachine-master/img/slot3.png" /></div>
    <div><img src="/Content/jQuery-SlotMachine-master/img/slot4.png" /></div>
    <div><img src="/Content/jQuery-SlotMachine-master/img/slot5.png" /></div>
    <div><img src="/Content/jQuery-SlotMachine-master/img/slot6.png" /></div>
   </div>
   </div>
  </div>

  <div class="col-xs-4">
   <div>
   <div id="machine2" class="randomizeMachine">
    <div><img src="/Content/jQuery-SlotMachine-master/img/slot1.png" /></div>
    <div><img src="/Content/jQuery-SlotMachine-master/img/slot2.png" /></div>
    <div><img src="/Content/jQuery-SlotMachine-master/img/slot3.png" /></div>
    <div><img src="/Content/jQuery-SlotMachine-master/img/slot4.png" /></div>
    <div><img src="/Content/jQuery-SlotMachine-master/img/slot5.png" /></div>
    <div><img src="/Content/jQuery-SlotMachine-master/img/slot6.png" /></div>
   </div>
   </div>
  </div>

  <div class="col-xs-4">
   <div>
   <div id="machine3" class="randomizeMachine">
    <div><img src="/Content/jQuery-SlotMachine-master/img/slot1.png" /></div>
    <div><img src="/Content/jQuery-SlotMachine-master/img/slot2.png" /></div>
    <div><img src="/Content/jQuery-SlotMachine-master/img/slot3.png" /></div>
    <div><img src="/Content/jQuery-SlotMachine-master/img/slot4.png" /></div>
    <div><img src="/Content/jQuery-SlotMachine-master/img/slot5.png" /></div>
    <div><img src="/Content/jQuery-SlotMachine-master/img/slot6.png" /></div>
   </div>
   </div>
  </div>
  </div>

  <div>
  <div class="btn-group btn-group-justified btn-group-randomize" role="group">
   <div id="ranomizeButton" type="button" class="btn btn-danger btn-lg">开始</div>
  </div>
  </div>
 </div>
 </div>

JS部分


$(function () {
  //简易游戏机
  var machine1 = $("#machine1").slotMachine({
  active: 0,
  delay: 500
  });

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

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

  var arr = [];
  function onComplete(active) {
  if (arr.length <= 1) {
   arr.push(active);
  }
  else if (arr.length > 1) {
   arr.push(active);
   if (arr[0] == arr[1] && arr[1] == arr[2]) {
   toastr.success("恭喜你中奖了！");
   }
   else if (arr[0] == arr[1] || arr[0] == arr[2] || arr[1] == arr[2]) {
   toastr.success("还差一点，继续加油");
   }
   else {
   toastr.success("手气不行");
   }
   arr = [];
  }
  }

  $("#ranomizeButton").click(function () {

  machine1.shuffle(5, onComplete);

  setTimeout(function () {
   machine2.shuffle(5, onComplete);
  }, 500);

  setTimeout(function () {
   machine3.shuffle(5, onComplete);
  }, 1000);

  })
 });

3、单个停止效果代码示例 Html部分


<div id="casino" style="padding-top:50px;">
 <div class="content">
  <h1>抽奖</h1>

  <div>
  <div id="casino1" class="slotMachine" style="margin-left: -65px;">
   <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="casino2" 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="casino3" 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 class="btn-group btn-group-justified btn-group-casino" role="group">
   <div id="slotMachineButtonShuffle" type="button" class="btn btn-primary btn-lg">开始</div>
   <div id="slotMachineButtonStop" type="button" class="btn btn-primary btn-lg">停止</div>
  </div>
  </div>

 </div>
 <div class="clearfix"></div>
 </div>

JS部分


$(function () {
  //单个停止
  var machine4 = $("#casino1").slotMachine({
  active: 0,
  delay: 500
  });

  var machine5 = $("#casino2").slotMachine({
  active: 1,
  delay: 550
  });

  machine6 = $("#casino3").slotMachine({
  active: 2,
  delay: 600
  });

  var started = 0;

  $("#slotMachineButtonShuffle").click(function () {
  started = 3;
  machine4.shuffle();
  machine5.shuffle();
  machine6.shuffle();
  });

  $("#slotMachineButtonStop").click(function () {
  switch (started) {
   case 3:
   machine4.stop();
   break;
   case 2:
   machine5.stop();
   break;
   case 1:
   machine6.stop();
   break;
  }
  started--;
  });
 });

三、总结 整体实现过程并不复杂，所有属性、事件及方法查阅文档即可轻松理解与应用。演示代码逻辑清晰，易于上手，希望本文能对大家学习JavaScript组件开发有所帮助。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印，自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式，预览压缩前后的大小。

使用 ›
作者最新文章

JS脚本在App中运行报错怎么解决

JS怎么使用padStart方法给数字补零

JS是什么意思？JavaScript全称及基本定义

JS 使用 toFixed(1) 保留一位小数的基本用法与注意事项

JS字符串转整数：parseInt与Number的区别及用法

相关文章
热门文章
更多
CSS text-transform与JS修改首字母大写的适用场景区别
JS中constructor属性判断数组存在哪些风险
JS正则替换中$1捕获组引用与字符串重组技巧
全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析
Node.js后端生成高强度随机字符串的方法
怎么在本地运行JavaScript脚本：Node.js下载安装与环境配置教程
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
JS 解压出现乱码或报错怎么解决？
JavaScript常见SyntaxError语法错误排查与修复方法
JavaScript实现按钮点击冷却时间的完整代码示例