频道导航

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

2019-01-04 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

一、组件预览

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

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

什么？还没达到想要的效果，好！下面，真实效果来一发。

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

还有我们年终抽奖效果，开始！停止！

二、代码示例

既然是js组件，肯定是先要下载组件库。首先贴上

然后来看看文件的引用：

代码如下:

" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

这里需要注意几点：

1）、引用jquery和bootstrap都是通过CDN加速的方式引用的，不懂CDN加速的可以百度。 2）、Jquery组件必须，并且组件需要Jquery 2.0以上版本的支持，版本太低会有js异常。 3）、bootstrap组件并非必须，但是本篇布局需要部分bootstrap的样式支持。 4）、toastr组件并非必须，此处用于显示中奖的结果。 1、试试手气效果代码 html部分

<div class="jb51code">
<pre class="brush:xhtml;">
<div id="triky">
<div class="content" style="text-align: center">

请选择你想吃的食物

<div class="row">
<div style="margin: auto;">
<div id="triky1">

<div class="clearfix">

JS部分

<div class="jb51code">
<pre class="brush: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 class="jb51code">
<pre class="brush:xhtml;">
<div id="randomize">
<div class="content container" style="text-align: center;max-width: 900px;">

简易游戏机

<div class="row">
<div class="col-xs-4">

<div class="col-xs-4">

<div class="col-xs-4">

JS部分

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,1000);

})
});

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

抽奖

<div id="casino2" class="slotMachine">
<div class="slot slot1">

<div class="slot slot2">

<div class="slot slot3">

<div class="slot slot4">

<div class="slot slot5">

<div class="slot slot6">

<div id="casino3" class="slotMachine">
<div class="slot slot1">
<div class="slot slot2">
<div class="slot slot3">
<div class="slot slot4">
<div class="slot slot5">
<div class="slot slot6">

<div class="btn-group btn-group-justified btn-group-casino" role="group">
<div id="slotMachineButtonShuffle" type="button" class="btn btn-primary btn-lg">开始
<div id="slotMachineButtonStop" type="button" class="btn btn-primary btn-lg">停止

JS部分

<div class="jb51code">
<pre class="brush: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组件有所帮助。

原文链接：https://www.f2er.com/js/49270.html

js制作抽奖系统 js图片切换 js组件SlotMachine

上一篇：JS中取二维数组中最大值的方法汇总下一篇：JS区分浏览器页面是刷新还是关闭

猜你在找的JavaScript相关文章

Javascript中的事件冒泡与捕获

事件冒泡和事件捕获起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...

作者：前端之家时间：2021-02-22

搞懂js中小数运算精度问题原因及解决办法

js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...

作者：前端之家时间：2021-02-22

搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理

什么是跨域跨域：广义的跨域包含一下内容： 1.资源跳转（链接跳转，重定向跳转，表单提...

作者：前端之家时间：2021-02-22

前端对base64编码的理解，原生js实现字符base64编码

@ "TOC" 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...

作者：前端之家时间：2021-02-22

搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式

搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ：的缩写，说都能直接说出来：模型，：视图...

作者：前端之家时间：2021-02-22

js判断浏览器是否支持webGL

起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。在各种浏览器上运行...

作者：前端之家时间：2021-02-14

js判断undefined和null

js判断undefined js判断null js判断null和undefined

作者：前端之家时间：2021-02-14

将文字自动转为banner打印形式的工具

http://patorjk.com/software/taag/

作者：前端之家时间：2021-02-14

聊一聊 bootstrap 的轮播图插件

今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...

作者：前端之家时间：2021-02-14

js实现图片无缝循环跑马灯

html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...

作者：前端之家时间：2021-02-14

最新文章