老虎機風格的數字jquery

我試圖在我的網站上實現老虎機風格的滾動數字，但我需要能夠預置什麼時候停止旋轉插槽的最終數字，我真的可以使用一些從我可以操作的一個工作示例開始，甚至是一個清晰的例子。有沒有人有時間向我展示如何做到這一點？作爲我正在尋找的參考，我一直在試圖找到位於這裏的老虎機插件：https://github.com/matthewlein/jQuery-jSlots爲我所需要的工作，但我無法找到一種方法來設置數字應該每個地方上，只能得到標準的隨機結果。老虎機風格的數字jquery

來源

2013-06-02 Phil

如果我理解你的問題，我認爲只需要一個包含你想要顯示的元素的div，然後將該div垂直放置在另一個div中，而外部div已經隱藏溢出了。 – Brad

我想要做的是在上面的鏈接使用代碼，但修改它，以便我可以設置哪些數字將出現一個標準的3列老虎機。現在它返回隨機數字，但我想讓它變成5,3,10這樣的數字，並且在旋轉後顯示這些數字，讓它們成爲最終結果。任何幫助非常感謝，謝謝！ – Phil

您需要修改第160行的finish函數，以使用您的數字而不是隨機的數字。您還需要與jSlots對象進行通信，以告訴它使用哪些數字。

來源

2013-06-02 06:18:55 Fallexe

非常感謝Fallexe的迴應，我找到了解決方法，並根據需要開展工作。再次感謝！ – Phil

您應該可以稍微修改插件代碼。這不是一個完整的解決方案，但是這是讓你開始的東西。將playSlots函數更改爲接受一組數字，這將是您想要的最終數字。

base.playSlots = function(values) { 

    base.values = values; 

    ...etc 
}

你會這樣稱呼它：

playSlots([7, 7, 7]);

的插槽將需要知道它們所對應的數組中的位置，所以你必須要修改設置一個位。在設置函數中，您應該在實例化時將索引傳遞給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 
}

來源

2013-06-02 06:21:10 bfuoco

這個答案很棒，作品很有魅力。 – Simon

我會做的是：

<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的圖像，這就是全部！

來源

2013-06-02 06:36:22 Cap123

老虎機風格的數字jquery

回答

相關問題