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 相关文章推荐
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 Javascript
基于jquery实现点击左右按钮图片横向滚动
Apr 11 Javascript
Jquery 表单验证类介绍与实例
Jun 09 Javascript
JavaScript汉诺塔问题解决方法
Apr 21 Javascript
封装好的javascript前端分页插件pagination
Jan 04 Javascript
ionic2 tabs使用 Modal底部tab弹出框
Dec 30 Javascript
原生js实现无缝轮播图效果
Jan 11 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
Dec 12 Javascript
vue中使用protobuf的过程记录
Oct 26 Javascript
vue与bootstrap实现简单用户信息添加删除功能
Feb 15 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
May 21 Javascript
express框架中使用jwt实现验证的方法
Aug 25 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中几个可以提高运行效率的代码写法、技巧分享
2014/08/21 PHP
php实现refresh刷新页面批量导入数据的方法
2014/12/23 PHP
PHP中遇到的时区问题解决方法
2015/07/23 PHP
你的编程语言可以这样做吗?
2006/09/07 Javascript
基于Jquery的动态添加控件并取值的实现代码
2010/09/24 Javascript
javascript 获取元素样式必杀技
2014/05/04 Javascript
轻松创建nodejs服务器(1):一个简单nodejs服务器例子
2014/12/18 NodeJs
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
javascript对浅拷贝和深拷贝的详解
2016/10/14 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
2016/12/11 Javascript
分享一个精简的vue.js 图片lazyload插件实例
2017/03/13 Javascript
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
python list转dict示例分享
2014/01/28 Python
Python中使用tarfile压缩、解压tar归档文件示例
2015/04/05 Python
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
Python工程师面试题 与Python Web相关
2016/01/14 Python
python中执行shell的两种方法总结
2017/01/10 Python
Python2和Python3.6环境解决共存问题
2018/11/09 Python
Python:二维列表下标互换方式(矩阵转置)
2019/12/02 Python
解析pip安装第三方库但PyCharm中却无法识别的问题及PyCharm安装第三方库的方法教程
2020/03/10 Python
Python导入父文件夹中模块并读取当前文件夹内的资源
2020/11/19 Python
用python对oracle进行简单性能测试
2020/12/05 Python
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
"序列点" 是什么
2016/07/29 面试题
Java面试笔试题大全
2016/11/23 面试题
护理学毕业生求职信
2013/11/14 职场文书
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
大气污染防治方案
2014/05/19 职场文书
会员活动策划方案
2014/08/19 职场文书
求职信格式范文
2015/03/19 职场文书
求职自我推荐信
2015/03/24 职场文书
运动会通讯稿600字
2015/07/20 职场文书
团队拓展训练感想
2015/08/07 职场文书
MySQL 如何设计统计数据表
2021/06/15 MySQL