js组件SlotMachine实现图片切换效果制作抽奖系统


Posted in Javascript onApril 17, 2016

前言:前两天在网上找组件,无意中发现了我们儿时游戏机效果的“SlotMachine组件”,浏览一遍下来,勾起了小时候满满的回忆。

下面就带着大家来看看这么一个神奇的组件——SlotMachine吧。

一、组件预览

先来一发简单的效果压压惊

js组件SlotMachine实现图片切换效果制作抽奖系统

觉得太简单?别急,好戏在后头,试试手气先。

js组件SlotMachine实现图片切换效果制作抽奖系统

什么?还没达到想要的效果,好!下面,真实效果来一发。

js组件SlotMachine实现图片切换效果制作抽奖系统

点击了好长时间,都没有中奖,难怪小时候怎么都赢不了呢。不信邪,继续点击开始,终于有一次中奖的了,真心不容易。

js组件SlotMachine实现图片切换效果制作抽奖系统

还有我们年终抽奖效果,开始!停止!

js组件SlotMachine实现图片切换效果制作抽奖系统

二、代码示例

既然是js组件,肯定是先要下载组件库。首先贴上 开源地址

js组件SlotMachine实现图片切换效果制作抽奖系统

然后来看看文件的引用:

<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="//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以上版本的支持,版本太低会有js异常。
3)、bootstrap组件并非必须,但是本篇布局需要部分bootstrap的样式支持。
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个图标
  });
 });

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

(1)初始化方法 var machine = $("#id").slotMachine({}); 返回当前旋转的对象。slotMachine()方法里面传递初始化的参数,比如

active:表示初始化的时候显示项的索引,从0开始
delay:切换两张图片的间隔时间(毫秒单位)
auto:是否自动旋转,取值为true or 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组件有所帮助。

Javascript 相关文章推荐
Add a Picture to a Microsoft Word Document
Jun 15 Javascript
异步动态加载js与css文件的js代码
Sep 15 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
Nov 06 Javascript
改变隐藏的input中value的值代码
Dec 30 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
May 22 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
Jun 06 Javascript
探讨JavaScript中的Rest参数和参数默认值
Jul 29 Javascript
轻松实现jquery手风琴效果
Jan 14 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
Dec 02 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
webpack之devtool详解
Feb 10 Javascript
vue项目实战总结篇
Feb 11 Javascript
JS中取二维数组中最大值的方法汇总
Apr 17 #Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
Apr 17 #Javascript
js实现select二级联动下拉菜单
Apr 17 #Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
Apr 17 #Javascript
第二次聊一聊JS require.js模块化工具的基础知识
Apr 17 #Javascript
第一次接触JS require.js模块化工具
Apr 17 #Javascript
jqGrid 学习笔记整理——进阶篇(一 )
Apr 17 #Javascript
You might like
使用PHP的日期与时间函数技巧
2008/04/24 PHP
yii2控制器Controller Ajax操作示例
2016/07/23 PHP
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
PHP实现通过CURL上传文件功能示例
2018/05/30 PHP
关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机
2018/11/20 PHP
jquery跨域请求示例分享(jquery发送ajax请求)
2014/03/25 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
2017/03/03 Javascript
基于EasyUI的基础之上实现树形功能菜单
2017/06/28 Javascript
微信小程序如何获取用户信息
2018/01/26 Javascript
javascript中的隐式调用
2018/02/10 Javascript
简单介绍react redux的中间件的使用
2018/04/06 Javascript
Vue使用localStorage存储数据的方法
2019/05/27 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
2019/09/30 Javascript
python 循环遍历字典元素的简单方法
2016/09/11 Python
TensorFlow实现Batch Normalization
2018/03/08 Python
详解Python安装scrapy的正确姿势
2018/06/26 Python
CentOS7下python3.7.0安装教程
2018/07/30 Python
python+pyqt5实现KFC点餐收银系统
2019/01/24 Python
如何用Python来理一理红楼梦里的那些关系
2019/08/14 Python
python飞机大战pygame游戏框架搭建操作详解
2019/12/17 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
分解成质因数(如435234=251*17*17*3*2,据说是华为笔试题)
2014/07/16 面试题
医院后勤自我鉴定
2013/10/13 职场文书
社区综治宣传月活动总结
2014/07/02 职场文书
党员批评与自我批评思想汇报
2014/10/08 职场文书
售房协议书范本2014
2014/10/23 职场文书
年终工作总结范文
2019/06/20 职场文书
《没有任何借口》读后感:完美的执行能力
2020/01/07 职场文书
Python类方法总结讲解
2021/07/26 Python
Vue鼠标滚轮滚动切换路由效果的实现方法
2021/08/04 Vue.js