如何讓滾動動畫工作（輪盤賭）

-1

<div class="roll"> 
    <img src="image.png" id="1" /> 
    <img src="image.png" id="2" /> 
    <img src="image.png" id="3" /> 
    <img src="image.png" id="4" /> 
    <img src="image.png" id="5" /> 
    <img src="image.png" id="6" /> 
    <img src="image.png" id="7" /> 
    etc ... 
</div>

圖片會直接因此它看起來像這樣

但不是顏色會有圖像

我有玩家陣列

var players = { 
    1: "Player 1", 
    2: "Player 2", 
    3: "Player 3" 
}

Whe如果卷停止，中間的線將選擇獲勝者並獲得該ID。

當沒有更多的圖像翻滾，將開始重新

我不要求源代碼。只是很好的說明，我該如何開始這個。

來源

2016-12-30 Tonza

我已經做了類似的事情，這是我怎麼會去一下步驟：

第1步 - 打造您的圖像的旋轉木馬

你需要確保你總是有元素一字排開屏幕遠遠不會看到任何更改。通常一個或兩個額外的屏幕就足夠了。我不知道你打算如何構建這些圖像，但如果你提供了一些源代碼，我可以幫助你多一點。

第2步 - 讓它動

這是比較容易的部分。只需將所有元素向左或向右移動x個像素，然後根據需要重複添加和移除元素。再一次，通過代碼，我可以在這裏幫助更多。

第3步 - 選擇贏家

我看到它的方式，你可以在2種方式之一進行。 One - 跟蹤哪些元素與線元素重疊（步驟2），或者 - 最後只需查看所有元素以查看哪個元素與線條重疊。

短，操作簡便版本： 雖然打字這個我知道你也可以預先決定勝負，排隊X圖像，並在最後的贏家，再加入後，也許更多10-15。然後，只需在父元素上使用CSS轉換就可以將其移動到足以讓贏家與藍條對齊的位置。 這可能是最簡單的方法。

例1：

快速CSS寬鬆的例子爲兩個例子：

transition: left 1s ease;

https://jsfiddle.net/L2ofgs2k/（我使用jQuery的應用的樣式的變化，但你可以用同樣的普通JS）

詳情請點擊此處help on CSS transitions.

來源

2016-12-30 20:11:41 Chris

如果我這樣做，我可能會使用我列出的第二個選項，因爲它會少得多跟蹤和你的動畫用CSS處理。（CSS'ease'也會照顧滑動效果），並且在旋轉木馬甚至「旋轉」之前知道獲勝者 – Chris

謝謝幫助了很多。 – Tonza

沒問題:)如果你無法得到它的工作，並且如果你讓我知道我會延長我的答案！ – Chris

我認爲你正在尋找一個cs走roullete腳本。 This simple library正是你要找的，許多CS網站也使用它。他們提供惡魔和非常好的文檔。如果你知道一點jQuery，它會非常簡單。

來源

2016-12-30 20:17:16

謝謝。從來沒有聽說過這個前景。我會研究它 – Tonza

網站像csgodouble，csgostrong使用它，它很容易實現它;） –

問題是自動播放超時... – Tonza

如何讓滾動動畫工作（輪盤賭）

回答

相關問題