js component SlotMachine realizes image switching effect production lottery system

Author：Eve Cole Update Time：2025-07-21 12:00:03

Preface: Two days ago, I was looking for components online and accidentally discovered the "SlotMachine component" of our childhood game console effect. After browsing it, it evokes the memories of my childhood.

Let’s take you to take a look at such a magical component - SlotMachine.

1. Component preview

Let's get a simple effect first

Think it's too simple? Don't worry, good show is coming, try your luck first.

What? Not achieving the desired effect yet, good! Below, the real effect will be released.

I clicked for a long time, but I didn’t win the prize. No wonder I couldn’t win when I was a kid. I don’t believe in evil, continue to click and start, and finally won the prize once. It’s really not easy.

And our year-end lottery results, start! stop!

2. Code examples

Since it is a js component, you must first download the component library. First post the open source address

Then let's take a look at the reference of the file:

The code copy is as follows:<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

A few points to note here:

1) Quote jquery and bootstrap are both referenced through cdn acceleration. If you don’t understand cdn acceleration, you can Baidu.

2) The Jquery component must be supported by Jquery 2.0 or above. If the version is too low, there will be js exceptions.

3) The bootstrap component is not necessary, but this layout requires some bootstrap style support.

4) The toastr component is not necessary, it is used to display the winning results here.

1. Try the luck effect code

html part

 <div id="triky"> <div style="text-align: center"> <h1>Please select the food you want</h1> <div> <div style="margin: auto;"> <div id="triky1"> <div> <img src="/Content/jQuery-SlotMachine-master/img/cookie.png" /> </div> <div> <img src="/Content/jQuery-SlotMachine-master/img/food2.jpg" /> </div> <div> <img src="/Content/jQuery-SlotMachine-master/img/food2.jpg" /> </div> <div> <img src="/Content/jQuery-SlotMachine-master/img/food3.jpg" /> </div> </div> <div> <div style="margin-left:-15px" role="group"> <div id="trikyShuffle" type="button"> Try luck</div> </div> </div> </div> </div> </div> </div> </div> </div> <div></div> </div> </div> </div> <div></div> </div>

JS part

 $(function () { //Try luck var triky = $("#triky1").slotMachine({ active: 2, //The index of the item displayed during initialization//delay: 150,//Switch the interval time between two pictures (milliseconds units) //randomize: function () { // return 0;//The index of the selected value after each rotation (starting from 0) //} }); $("#trikyShuffle").click(function () { triky.shuffle(8);//Start the rotation method, parameter 8 means that 8 icons are skipped each rotation}); });

Detailed explanation of common JS properties, methods and events

(1) Initialization method var machine = $("#id").slotMachine({}); Returns the currently rotated object. The initialized parameters are passed in the slotMachine() method, for example

active: indicates the index of the displayed item during initialization, starting from 0

delay: Switch the interval time between two pictures (milliseconds units)

auto: Whether to rotate automatically, the value is true or false

spins: When auto is true, this is the number of icons that are skipped each time

stophidden: Whether the animation at the beginning and stop occurs when the animation occurs

randomize:function(activeElementIndex){} This property represents the index of the selected value after each rotation (starting from 0)

direction: the direction of the animation, value (up||down)

(2) Common methods

machine.shuffle( repeat, onStopCallback ); indicates the start of rotation, repeat indicates the number of pictures skipped each time; onstopCallback indicates the event callback method after the rotation stops.

machine.prev(); returns the previous element

machine.next(); returns the next element

machine.stop(); stop rotation

machine.active; gets the index of the selected element

machine.running; detects whether it is rotating, true means it is rotating

machine.stopping; Detection whether it has stopped

machine.destroy(); destroys the rotation node

2. Simple game console effect code example

html part

 <div id="randomize"> <div style="text-align: center;max-width: 900px;"> <h1>Simple game console</h1> <div> <div> <div> <div> <div id="machine1"> <div><img src="/Content/jQuery-SlotMachine-master/img/slot1.png" /></div> <div><img 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-SlotMachine-master/img/slot4.png" /></div> <div><img src="/Content/jQuery-SlotMachine-master/img/slot5.png" /></div> <div><img src="/Content/jQuery-SlotMachine-master/img/slot6.png" /></div> </div> </div> </div> <div> <div> <div id="machine2"> <div><img src="/Content/jQuery-SlotMachine-master/img/slot1.png" /></div> <div><img 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-SlotMachine-master/img/slot4.png" /></div> <div><img src="/Content/jQuery-SlotMachine-master/img/slot5.png" /></div> <div><img src="/Content/jQuery-SlotMachine-master/img/slot5.png" /></div> <div><img src="/Content/jQuery-SlotMachine-master/img/slot6.png" /></div> </div> </div> </div> <div> <div> <div id="machine3"> <div><img src="/Content/jQuery-SlotMachine-master/img/slot1.png" /></div> <div><img 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-SlotMachine-master/img/slot4.png" /></div> <div><img src="/Content/jQuery-SlotMachine-master/img/slot5.png" /></div> <div><img src="/Content/jQuery-SlotMachine-master/img/slot6.png" /></div> </div> </div> </div> </div> </div> </div> </div> <div> <div role="group"> <div id="ranomizeButton" type="button"> Start</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 part

 $(function () { //Simple game console var machine1 = $("#machine1").slotMachine({ active: 0, delay: 500 }); var machine2 = $("#machine2").slotMachine({ active: 1, delay: 500, direction: 'down' }); var machine3 = $("#machine3").slotMachine({ active: 2, delay: 500 }); var arr = []; function onComplete(active) { if (arr.length <= 1) { arr.push(active); } else if (arr.length > 1) { arr.push(active); if (arr[0] == arr[1] && arr[1] == arr[2]) { toastr.success("Congratulations for winning!"); } else if (arr[0] == arr[1] || arr[0] == arr[2] || arr[1] == arr[2]) { toastr.success("It's still a little short, keep cheering"); } else { toastr.success("I can't do luck"); } arr = []; } } $("#ranomizeButton").click(function () { machine1.shuffle(5, onComplete); setTimeout(function () { machine2.shuffle(5, onComplete); }, 500); setTimeout(function () { machine3.shuffle(5, onComplete); }, 1000); }) });

3. Single stop effect code example

Html part

 <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 role="group"> <div id="slotMachineButtonShuffle" type="button">Start</div> <div id="slotMachineButtonStop" type="button">Stop</div> </div> </div> </div> </div> <div></div> </div>

JS part

 $(function () { //Single stop var machine4 = $("#casino1").slotMachine({ active: 0, delay: 500 }); var machine5 = $("#casino2").slotMachine({ active: 1, delay: 550 }); machine6 = $("#casino3").slotMachine({ active: 2, delay: 600 }); var started = 0; $("#slotMachineButtonShuffle").click(function () { started = 3; machine4.shuffle(); machine5.shuffle(); machine6.shuffle(); }); $("#slotMachineButtonStop").click(function () { switch (started) { case 3: machine4.stop(); break; case 2: machine5.stop(); break; case 1: machine6.stop(); break; } started-; }); });

3. Summary

The whole process is not complicated. All properties, events, and methods can be understood and applied easily by reading the documentation. There is nothing to say about the demonstration code. You can understand it at first glance. I hope it will be helpful for everyone to learn JavaScript components.