我试图在我的网站上实现一个老虎机风格的滚动数字,但我需要能够预设什么最终数字将是当插槽停止旋转,我真的可以使用一些明确的例子开始,甚至一个工作的例子,我可以操纵。有人有时间告诉我怎么做吗?作为我所寻找的参考,我一直试图得到老虎机插件位于这里:https://github.com/matthewlein/jQuery-jSlots为我需要的工作,但我无法找到一种方法来设置每个数字应该落在什么上,只能得到标准的随机结果。
您需要修改第160行的finish
函数,以使用您的数字而不是随机的数字。您还需要与jSlots
对象通信,告诉它使用哪些数字。
您应该能够稍微修改插件代码。这不是一个完整的解决方案,但这里有一些东西可以让你开始。改变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
}
我要做的是:
<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这些图片。