效果图:

需引入js文件:

<script src="js/jquery-3.2.0.js"></script>
<script src="js/jquery.slotmachine.js"></script>

html代码:

<div class="draw_wrap">
<dl class="clearfix">
<dd id="machine1" class="mui-pull-left">
<div class="cell">
<img src="data:images/1-1.png" />
</div>
<div class="cell">
<img src="data:images/1-2.png" />
</div>
<div class="cell">
<img src="data:images/1-3.png" />
</div>
</dd>
<dd id="machine2" class="mui-pull-left">
<div class="cell">
<img src="data:images/1-2.png" />
</div>
<div class="cell">
<img src="data:images/1-3.png" />
</div>
<div class="cell">
<img src="data:images/1-1.png" />
</div>
</dd>
<dd id="machine3" class="mui-pull-left">
<div class="cell">
<img src="data:images/1-3.png" />
</div>
<div class="cell">
<img src="data:images/1-1.png" />
</div>
<div class="cell">
<img src="data:images/1-2.png" />
</div>
</dd>
</dl>
<div id="stopBtn" class="stop_btn" data-type="stopBtn"></div>
<div class="result">
<p>未中奖,再接再厉</p>
<a id="alignBtn" class="align_btn" href="#">再来一次</a>
</div>
</div>
</div>

js代码:

$(function () {
var machine1 = $("#machine1").slotMachine({
active:0,
delay:500
});
var machine2 = $("#machine2").slotMachine({
active:1,
delay:500
});
var machine3 = $("#machine3").slotMachine({
active:2,
delay:500
});
function startSlotmachine(){
machine1.shuffle();
machine2.shuffle();
machine3.shuffle();
}
startSlotmachine()
$("#alignBtn").click(function(){
startSlotmachine()
});
$("#stopBtn").click(function(){
if(machine1.isRunning()){
machine1.stop(true);
setTimeout(function(){
setTimeout(machine2.stop(true));
},500)
setTimeout(function(){
setTimeout(machine3.stop(true));
},1000)
}
});
});

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(); 摧毁旋转节点

完整代码:https://github.com/eleven-123/jquery.slotmachine

3列滚动抽奖 jquery.slotmachine的更多相关文章

  1. js手机号批量滚动抽奖代码实现

    我们平时在看一些选秀节目或一些歌唱类比赛节目时经常会看到在现场的大屏幕上会有观众的手机号在滚动来选出谁是幸运观众或谁中了什么奖项,这些手机号都是现场观众或场外观众在给选手投票时产生的,当主持人一声开始 ...

  2. C#部分---利用arraylist集合做滚动抽奖;

    输入多个手机号码,放到集合中,进行三秒钟的滚动抽奖:随机显示号码,清空,再显示: 1.收集号码: 2.每隔三秒进行抽奖,及作弊代码,哈哈哈: 3.System.Threading.Thread.Sle ...

  3. 一款兼容IE6并带有多图横向滚动的jquery特效

    一款兼容IE6并带有多图横向滚动的jquery特效,自动切换多个图片的jquery特效效果, 为大家分享这个的原因是,这款特效在兼容IE6上面很完美,实用性就广很多了. 适用浏览器:IE6.IE7.I ...

  4. 分享一款页面视差滚动切换jquery.localscroll插件

    今天给大家分享一款页面视差滚动切换jquery.localscroll插件. 滚动鼠标液动条看下页面的切换效果.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera ...

  5. 图片文字滚动插件jQuery Scrollbox

    图片文字滚动插件jQuery Scrollbox附件中提供了五种图片.文字滚动样式,只需调用jquery库和jQuery Scrollbox插件,然后再加一段简单的jquery代码即可使用,兼容性良好 ...

  6. 页面动态数据的滚动效果——jquery滚动组件(vticker.js)

    <script language="javascript" src="lirms/Test/jquery-1.4.2.js"></script ...

  7. 整屏滚动效果 jquery.fullPage.js插件+CSS3实现

    最近很流行整屏滚动的效果,无论是在PC端还是移动端,本人也借机学习了一下,主要通过jquery.funnPage.js插件+CSS3实现效果. 本人做的效果: PC端:http://demo.qpdi ...

  8. 一个文字无缝滚动的jQuery插件

    直接上代码吧 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...

  9. 1.2.8 Excel做个滚动抽奖

    1.首先要准备好数据库: 2.用RAND函数来生成随机数字,做一个辅助列: 3.制作抽奖界面: 4.输入公式: 在F3中输入下列公式并填充至F5: =INDEX(A:A,MATCH(SMALL(B:B ...

随机推荐

  1. redis安装到本地服务的方法

    要安装Redis,首先要获取安装包. Windows的Redis安装包需要到以下GitHub链接找到. 链接:https://github.com/MSOpenTech/redis 打开网站后,找到R ...

  2. 41. wait notify 方法

    wait()  等待,如果一个线程执行了wait方法,那么该线程就会进去一个以锁对象为标识符的线程池中等待 notity() 唤醒,如果一个线程执行了notity方法,那么就会唤醒以锁对象为标识符的线 ...

  3. CF838C(博弈+FWT子集卷积+多项式ln、exp)

    传送门: http://codeforces.com/problemset/problem/838/C 题解: 如果一个字符串的排列数是偶数,则先手必胜,因为如果下一层有后手必赢态,直接转移过去,不然 ...

  4. thinkphp session驱动

    默认的session驱动的命名空间是Think\Session\Driver,并实现下面的驱动接口:大理石构件哪家好 方法说明 接口方法 打开Session open($savePath, $sess ...

  5. ArcGIS中QueryTask,FindTask,IndentifyTask 之间的区别

    1:QueryTask是一个进行空间和属性查询的功能类,它可以在某个地图服务的某个子图层内进行查询,顺便需要提一下的是,QueryTask进行查询的地图服务并 不必项加载到Map中进行显示.Query ...

  6. 微信-小程序-开发文档-服务端-模板消息:templateMessage.getTemplateList

    ylbtech-微信-小程序-开发文档-服务端-模板消息:templateMessage.getTemplateList 1.返回顶部 1. templateMessage.getTemplateLi ...

  7. unity 移动

    上下左右平移 void Start() { QualitySettings.vSyncCount = ; Application.targetFrameRate = ;//控制帧数 } // Upda ...

  8. 【转】Linux(CentOS) vps安装xfce桌面+VNC

    以前我发过一篇文章利用vnc远程连接VPS桌面,其中用到的是kde桌面,后来知道xfce总体来说比kde占得内存还小些,因为xfce轻便.简单,今天因为一些原因需要在我的vps上搭建用户桌面,所以就试 ...

  9. How to Add Swap on CentOS

    About Linux Swapping Linux RAM is composed of chunks of memory called pages. To free up pages of RAM ...

  10. spring boot junit test

    这里分三种,1.测普通方法或通过原生java API接口调用 2.基于spring依赖注入调用 3.controller层调用 需要引入依赖:默认springboot已经引入 <dependen ...