JSコンポーネントSlotMachineは画像スイッチング効果生産宝くじシステムを実現します

著者：Eve Cole 更新時間：2025-07-21 12:00:03

序文：2日前、私はオンラインでコンポーネントを探していて、子供時代のゲームコンソール効果の「スロットマシンコンポーネント」を誤って発見しました。それを閲覧した後、それは私の子供時代の記憶を呼び起こします。

このような魔法のコンポーネントであるslotmachineを見てみましょう。

1。コンポーネントプレビュー

最初に簡単な効果を得てみましょう

簡単すぎると思いますか？心配しないでください、良いショーが来ています、最初にあなたの運を試してください。

何？まだ望ましい効果を達成していない、良い！以下では、実際の効果がリリースされます。

私は長い間クリックしましたが、賞を受賞しませんでした。私が子供の頃に勝てなかったのも不思議ではありません。私は悪を信じず、クリックして開始し続け、最終的に一度賞を受賞しました。本当に簡単ではありません。

そして、私たちの年末の宝くじの結果、始めましょう！停止！

2。コードの例

JSコンポーネントであるため、最初にコンポーネントライブラリをダウンロードする必要があります。最初にオープンソースアドレスを投稿します

次に、ファイルの参照を見てみましょう。

コードコピーは次のとおりです。<link rel = "styleSheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" Integrity = "SHA384-1Q8MTJOASX8J1AU+A5WDVNPI2LKFFWWEAA8HDDJZLPLEGXHJVME1FGJWPGMKZZS7" COSSORIGIN = "Anonymous">

<スクリプトsrc = "〜/content/toastr/toastr.min.js"> </script>

ここに注意すべきいくつかのポイント：

1）引用jQueryとブートストラップはどちらもCDN加速度を通じて参照されます。 CDN加速がわからない場合は、Baiduを使用できます。

2）jQueryコンポーネントは、jQuery 2.0以上でサポートする必要があります。バージョンが低すぎる場合、JSの例外があります。

3）ブートストラップコンポーネントは必要ありませんが、このレイアウトにはブートストラップスタイルのサポートが必要です。

4）to -astrコンポーネントは必要ありません。ここで勝利の結果を表示するために使用されます。

1.運動コードを試してください

HTMLパーツ

<div id = "triky"> <div style = "text-align：center-align"> <h1>あなたが望む食べ物を選択してください</h1> <div> <div> div style = "mirgn：auto;"> <div id = "triky1"> <div> src = "/content/jquery-slotmachine-master/img/food2.jpg"/> </div> <div> <img src = "/content/jquery-slotmachine-master/food2.jpg"/>> </div> <div> <img src =/content/jquery-slotmyne-mg/> jgpggine-masmast </div> </div> <div> <div style = "margin-left：-15px" role = "group"> <div id = "trikyshuffle" type = "button"> div </div> </div> </div> </div> div> </div> </div> </div> div> div> div> </div> div> div> div> div> div> div> div> div> div> div> div> div> div> div> </div>

JSパート

$（function（）{// Luck var triky = $（ "＃triky1"）。slotmachine（{active：2、//初期化中に表示されるアイテムのインデックスを試してください//遅延：150、// 2つの写真間の間隔時間を切り替えます（ミリ秒単位）//ランダム化：function（）{// $（ "＃trikyshuffle"）。

一般的なJSプロパティ、方法、イベントの詳細な説明

（1）初期化方法var machine = $（ "＃id"）。slotmachine（{}）;現在回転しているオブジェクトを返します。初期化されたパラメーターは、たとえば、slotmachine（）メソッドに渡されます。

アクティブ：0から始まる初期化中に表示されたアイテムのインデックスを示します

遅延：2つの画像間の間隔時間を切り替えます（ミリ秒単位）

Auto：自動的に回転するかどうか、値はtrueまたはfalseです

スピン：自動が真である場合、これは毎回スキップされるアイコンの数です

Stophidden：アニメーションが発生したときに最初と停止のアニメーションが発生するかどうか

ランダム化：function（ActiveElementIndex）{}このプロパティは、各回転後の選択された値のインデックスを表します（0から始まる）

方向：アニメーションの方向、値（up || down）

（2）一般的な方法

machine.shuffle（繰り返し、オンストップコールバック）;回転の開始を示し、繰り返しは毎回スキップされた写真の数を示します。 OnStopCallbackは、回転が停止した後のイベントコールバックメソッドを示します。

machine.prev（）;前の要素を返します

machine.next（）;次の要素を返します

machine.stop（）;回転を停止します

Machine.active;選択した要素のインデックスを取得します

Machine.Running;回転しているかどうかを検出します、本当は回転していることを意味します

Machine.Stopping;停止したかどうかを検出します

machine.destroy（）;回転ノードを破壊します

2。シンプルなゲームコンソール効果コードの例

HTMLパーツ

<div id = "randomize"> <div style = "text-align：center; max-width：900px;"> <h1> simple Game Console </h1> <div> <div> <div> <div = "machine1"> <div> <img src = "/content/content/jquery-machine-machine-machines/slot1 src = "/content/jquery-slotmachine-master/img/slot2.png"/> </div> <div> <img src = "/content/jquery-slotmachine-master/img/slot3.png"/> </div> <div> <img src = "/content/jquery-slotmyne-mg" /> </div> <div> <img src = "/content/jquery-slotmachine-master/img/slot5.png"/> </div> <div> <img src = "/content/jquery-slotmachine-master/img/slot6.png" /> <div> <img src = "/content/jquery-slotmachine-master/img/slot1.png"/> </div> <div> <img src = "/content/jquery-slotmachine-master/img/slot2.png"/>> </div> <img src = "/content/jquery-slotmachine-master/img/slot3.png"/> </div> <div> <img src = "/content/jquery-slotmachine-master/slot4.png"/> </> </div> <div> <img src = "/content/jquery-slotmyne-mg" "" "" "" "" ppngymyne-mgint /> </div> <div> <img src = "/content/jquery-slotmachine-master/img/slot5.png"/> </div> <div> <img src = "/content/jquery-slotmachine-master/jquery-master/img/slot6.png"/>> </div> div> div </div <> <> <> <> <> <> <> <> <div> <img src = "/content/jquery-slotmachine-master/img/slot1.png"/> </div> <div> <img src = "/content/jquery-slotmachine-master/img/slot2.png"/>> </div> <img src = "/content/jquery-slotmachine-master/img/slot3.png"/> </div> <div> <img src = "/content/jquery-slotmachine-master/slot4.png"/> </> </div> <div> <img src = "/content/jquery-slotmyne-mg" "" "" "" "" ppngymyne-mgint /> </div> <div> <img src = "/content/jquery-slotmachine-master/img/slot6.png"/> </div> </div> </div> </div> </div> </div> </div> <div> <div> div div = "div </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> div> div> <> <> <> <> </div> div> div> div> div> div>

JSパート

$（function（）{//シンプルなゲームコンソールvar machine1 = $（ "＃machine1"）。slotmachine（{active：0、delay：500}）; var machine2 = $（ "＃machine2"）。 var arr = [] oncomplete（action）{arr.push（active）; || == arr [1] == astr.succes settimeout（）{machine2.shuffle（5、oncomplete）;}、500）{machine3.shuffle（5、oncomplete）;}、1000）;

3。シングルストップエフェクトコードの例

HTMLパーツ

<div id="casino" style="padding-top:50px;"> <div> <h1>Raffle</h1> <div> <div id="casino1" style="margin-left: -65px;"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> </div> <div rofid " id = "slotmachinebuttonstop" type = "button"> stop </div> </div> </div> </div> </div> <div> </div> </div>

JSパート

$（function（）{// single stop var machine4 = $（ "＃casino1"）。slotmachine（{active：0、delay：500}）; var machine5 = $（ "＃casino2"）。slotmachine（{active：1、delay：550}）; machine6 = $（ "＃casino3"）; slotmachine（ "active：deay：deaker（ $（ "＃slotmachinebuttonshuffle"）。 Machine6.Stop（）;

3。概要

プロセス全体が複雑ではありません。すべてのプロパティ、イベント、および方法は、ドキュメントを読むことで簡単に理解および適用できます。デモコードについて何も言うことはありません。一見理解できます。誰もがJavaScriptコンポーネントを学ぶことが役立つことを願っています。