ロールアニメーションを動作させる方法（ルーレット）

Question

私は結果のないロール/ルーレットアニメーションをしようとしています。それはこの

のようになります。しかし、私は選手たちの配列を持っている

代わりに色の画像が存在しますので、

<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を取得します。

それが再び

私はソースコードを求めていないよやり直すます転がるように、それ以上の画像がないとき。ちょうどよい指示はどうすればこのことを始めるのですか？

Answer 1

私は似たような行っているし、これは私が段階的にそれについて移動する方法を次のとおりです。

ステップ1 - あなたはいつも並ん要素を持っていることを確認する必要があり、画像

のあなたのカルーセルを構築ユーザーが何も変更を見ていないほどスクリーンから離れています。通常は1〜2画面余分で十分です。これらの画像をどのように作成するのか分かりませんが、ソースコードを提供すればもう少しお手伝いできます。

ステップ2 - それはこれが簡単な部分である

を移動してください。すべての要素をxピクセルずつ左右に移動し、必要に応じて要素を追加したり削除したりするだけです。繰り返しますが、コードで私はここでもっと助けることができます。

ステップ3 - 勝者

私はそれを見る方法を選んで、あなたは、2のいずれかの方法でこれを行うことができます。 One - どの要素が各翻訳（ステップ2）と重複しているかを追跡します。または、最後にすべての要素を調べて、どの要素がその行に重なっているかを確認します。

短いと簡単にバージョン： これを入力している間、私はあなたにも勝者を事前に決定することができる実現し、ラインアップは多分後の10~15以上を追加し、最後に勝者で画像をxは。その後、親要素のCSSトランジションを使用して、勝者が青いバーと並ぶように移動します。 これはおそらく最も簡単な方法です。

---

例1：いずれかの例については、例を緩和

クイックCSS：

transition: left 1s ease; 

https://jsfiddle.net/L2ofgs2k/（私はスタイルの変更を適用するためにjQueryを使用していますがと同じことを行うことができますレギュラーJS）

詳細はこちらhelp on CSS transitions.

Answer 2

あなたはcs go roulleteスクリプトを作成しようとしていると思います。 This simple libraryはまさにあなたが探しているもので、多くのcsがサイトにも同様に使っています。彼らは悪魔と非常に良い文書を提供します。あなたがjqueryの少しを知っているなら、それはかなりシンプルになるでしょう。