类似吃角子老虎机 随机列表选择器 jQuery Bandit

  • 源码大小:7.22KB
  • 所需积分:1积分
  • 源码编号:19JP-3157
  • 浏览次数:430次
  • 最后更新:2023年05月12日
  • 所属栏目:其他
本站默认解压密码:19jp.com 或 19jp_com

简介

Bandit是一款小巧的jQuery随机列表选择器,可以让你在网站上创建类似老虎机的体验。

它的工作原理是旋转一个或多个HTML无序列表,然后以随机的方式从列表中选择项目。

参见:

  • jQuery中的老虎机型号和选项选择器-Drum.js
  • 使用Slotmachine.js库创建老虎机动画

如何使用它:

1.在文档中下载并加载Bandit插件。

<!-- jQuery is required -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- jQuery Bandit -->
<script src="jquery.bandit.js"></script>

2.调用函数强盗在您的HTML列表(本例中为三个列表)上,并自动启动/停止旋转。

$('ul').bandit({
  speed: [20, 40, 60],
  autoStop:  [2000, 3000, 4000],
  spinOnLoad: true,
});

3.创建自定义控件以手动启动/停止旋转。

<button id="start">Spin!</button>
<button id="stop">Stop</button>
$('ul').bandit({
  startButton: '#start',
  stopButton: '#stop',
});

4.使用完成回调。

$('ul').bandit({
  done: function(text){
    console.log(text);
  }
});

5.配置旋转动画。

$('ul').bandit({

  // delay
  delay: 2000,

  // acceleration
  accel: 10,

  // deceleration
  decel: .8,
  
});

预览截图