老虎机风格数字jquery

时间:2013-06-02 05:12:04

标签: javascript jquery

我正在尝试在我的网站上实现老虎机样式滚动数字,但我需要能够预设当插槽停止旋转时最终数字将是什么,我真的可以使用一些明确的示例从甚至是一个我可以操纵的工作例子。有没有人有时间告诉我如何做到这一点?作为我正在寻找的参考,我一直在尝试将插槽机插件放在这里:https://github.com/matthewlein/jQuery-jSlots为我需要的东西工作,但我无法找到一种设置方法每个登陆的数字,只能得到标准的随机结果。

3 个答案:

答案 0 :(得分:1)

您需要修改第160行的finish功能,以使用您的数字而不是随机数字。您还需要与jSlots对象进行通信,以告诉它使用哪些数字。

答案 1 :(得分:1)

您应该可以稍微修改插件代码。这不是一个完整的解决方案,但这里有一些东西可以帮助您入门。更改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方法中,将随机数生成替换为预先选择的数字。

finish : function() {

    ...etc

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

    ..etc
}

答案 2 :(得分:0)

我要做的是:

<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,这就是全部!