javascript - 老虎机风格的数字 jquery

Question

我正在尝试在我的网站上实现老虎机风格的滚动数字，但我需要能够预设老虎机停止旋转时的最终数字，我真的可以使用一些明确的例子来开始，甚至是我可以操作的工作示例。有人有时间告诉我如何做到这一点吗？作为我正在寻找的参考，我一直在尝试让老虎机插件位于此处：https ://github.com/matthewlein/jQuery-jSlots 来满足我的需要，但我无法要找到一种方法来设置每个数字应该落在什么地方，只能得到标准的随机结果。

Answer 1

您需要修改第finish160 行的函数以使用您的数字而不是随机数字。您还需要与jSlots对象通信以告诉它使用什么数字。

Answer 2

您应该能够稍微修改插件代码。这不是一个完整的解决方案，但可以帮助您入门。更改playSlots函数以接受一个数字数组，这将是您想要的最终数字。

base.playSlots = function(values) {

    base.values = values;

    ...etc
}

你会这样称呼它：

playSlots([7, 7, 7]);

插槽需要知道它们对应于数组中的哪个位置，因此您必须稍微修改设置。在 setup 函数中，您应该在实例化时将索引传递给 Slot() 对象。

for (var i = base.options.number - 1; i >= 0; i--){
    base.allSlots.push( new base.Slot(i) );
}

在插槽构造函数中，您应该存储对它的引用。

base.Slot = function(slotIndex) {

    this.slotIndex = slotIndex;

    etc...
};

最后，在最后一次旋转时调用的完成方法中，将随机数生成替换为您预先选择的数字。

finish : function() {

    ...etc

    var endNum = base.values[this.slotIndex];

    ..etc
}

Answer 3

我会做的是：

<div id="spinner"></div>

查找 body 标签并添加到标签上： onLoad="setbg()"

广告然后是js代码

function roll() {
    var spinners = new Array;
    spinners[0] = spin(0);
    spinners[1] = spin(1);
    spinners[2] = spin(2);
    spinners[3] = spin(3);
    spinners[4] = spin(4);
    spinners[5] = spin(5);
    spinners[6] = spin(6);
    spinners[7] = spin(7);
    spinners[8] = spin(8);
    spinners[9] = spin(9);
    spinners[10] = spin(10);
    spinners[11] = spin(11);

    document.getElementById('spinner').innerHTML = '<img src="rolling.png"> math.floor(math.random()*spinners.length);
} 
function spin(spinnumber) {
    if (spinnumber == 0) {
        document.getElementById('spinner').innerHTML = '<img src="spinimage0.png" />';
    } else if (spinnumber == 1) {
        document.getElementById('spinner').innerHTML = '<img src="spinimage1.png" />';
    } else if (spinnumber == 2) {
        document.getElementById('spinner').innerHTML = '<img src="spinimage2.png" />';
    } else if (spinnumber == 3) {
        document.getElementById('spinner').innerHTML = '<img src="spinimage3.png" />';
    else if (spinnumber == 4) {
        document.getElementById('spinner').innerHTML = '<img src="spinimage4.png" />';
    } else if (spinnumber == 5) {
        document.getElementById('spinner').innerHTML = '<img src="spinimage5.png" />';
    } else if (spinnumber == 6) {
        document.getElementById('spinner').innerHTML = '<img src="spinimage6.png" />';
    } else if (spinnumber == 7) {
        document.getElementById('spinner').innerHTML = '<img src="spinimage7.png" />';
    } else if (spinnumber == 8) {
        document.getElementById('spinner').innerHTML = '<img src="spinimage8.png" />';
    } else if (spinnumber == 9) {
        document.getElementById('spinner').innerHTML = '<img src="spinimage9.png" />';
    } else if (spinnumber == 10) {
        document.getElementById('spinner').innerHTML = '<img src="spinimage10.png" />';
    } else if (spinnumber == 10) {
        document.getElementById('spinner').innerHTML = '<img src="spinimage10.png" />';
    } else if (spinnumber == 11) {
        document.getElementById('spinner').innerHTML = '<img src="spinimage11.png" />';
    }
}
function setbg({
    document.getElementById('spinner').innerHTML = '<img src="spinnerbg.png">'
};

请注意，您需要名为 spinnerbg.png、spinimage0-11.png、rolling.png 的图像，仅此而已！