jquery-slotmachine控制停到指定位置方法

jquery-slotmachine是一个实现类似老虎机抽奖的插件,默认的配置不能控制停到指定位置

但是futureActive这个属性就是最后的结果,在结束之前只需要设定一个值就可以进行控制

在自己写的页面里添加

window.SlotMachine.prototype.setResult = function (num) {
    this.futureActive = num;
};

定义SoltMachine方法

const SlotMachine = window.SlotMachine;

1、初始化转轮

const m0 = document.querySelector('#machine0');
let machine0 = new SlotMachine(m0, {
        active: 0,
        delay: 500,
        randomize () {
        return this.futureActive
    }
});

2、开始旋转

machine0.shuffle(9999);//旋转
machine0.setResult(1);//停止在第二个位置 从0开始

3、停止旋转

machine0.stop()

这样做就可以使其听到指定位置了

PS:在项目里通过npm安装的引入页面方式

import 'jquery-slotmachine/dist/slotmachine.min.js'
import 'jquery-slotmachine/dist/jquery.slotmachine.min.css'

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
以下是一个简单的 Vue3 图片拉霸机示例代码: ``` <template> <div class="slotmachine"> <div class="slotmachine-container"> <div class="slotmachine-image" v-for="(image, index) in images" :key="index" :style="{ transform: 'translateY(' + (imagePosition - index * imageHeight) + 'px)' }"> <img :src="image" /> </div> </div> <div class="slotmachine-controls"> <button @click="start">Start</button> <button @click="stop">Stop</button> </div> </div> </template> <script> import { reactive, ref } from 'vue'; export default { setup() { const images = reactive([ 'image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg', ]); const imageHeight = 100; const imagePosition = ref(0); let intervalId = null; const start = () => { clearInterval(intervalId); intervalId = setInterval(() => { imagePosition.value += imageHeight; }, 100); }; const stop = () => { clearInterval(intervalId); const position = Math.round(imagePosition.value / imageHeight) * imageHeight; imagePosition.value = position; }; return { images, imageHeight, imagePosition, start, stop, }; }, }; </script> <style> .slotmachine { display: flex; flex-direction: column; align-items: center; } .slotmachine-container { width: 100px; height: 300px; overflow: hidden; } .slotmachine-image { width: 100%; height: 100px; display: flex; justify-content: center; align-items: center; } .slotmachine-image img { width: 80%; height: 80%; object-fit: contain; } .slotmachine-controls { margin-top: 20px; } .slotmachine-controls button { margin-right: 10px; } </style> ``` 这个示例代码中,我们使用了 Vue3 中的 `reactive` 和 `ref` 方法来定义响应式数据,使用了 `setup` 函数来编写逻辑代码,并在模板中使用了动态绑定和计算属性来实现图片的滚动和停止。同时,我们使用了 CSS 来设置图片和容器的样式,以便它们在组件中正确地显示。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值