JS Component Slotmachine реализует систему лотереи с переключением изображений.

Автор：Eve Cole Время обновления：2025-07-21 12:00:03

Предисловие: два дня назад я искал компоненты в Интернете и случайно обнаружил «компонент слотмахин» нашей детской игровой консоли. После просмотра это вызывает воспоминания о моем детстве.

Давайте возьмем вас, чтобы взглянуть на такой волшебный компонент - слотмахин.

1. Предварительный просмотр компонента

Давайте сначала получим простой эффект

Думаешь, это слишком просто? Не волнуйся, хорошее шоу наступает, попробуйте свою удачу в первую очередь.

Что? Пока не достигая желаемого эффекта, хорошо! Ниже реальный эффект будет выпущен.

Я долго нажимал, но я не выиграл приз. Неудивительно, что я не мог победить, когда я был ребенком. Я не верю в зло, продолжаю щелкать и начинать, и, наконец, один раз выиграл приз. Это действительно нелегко.

И наши результаты лотереи на конец года, начните! останавливаться!

2. Примеры кода

Поскольку это компонент JS, вы должны сначала загрузить библиотеку компонентов. Первый разместите адрес с открытым исходным кодом

Затем давайте посмотрим на ссылку на файл:

Кода -копия выглядит следующим образом: <link rel = "styleSheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" Целостность = "SHA384-1Q8MTJOASX8J1AU+A5WDVNPI2LKFFWWEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUARINDJZLPLEGXHJVME1FGJWPGMKZS7" Crossorigin = "Anonymous">

Несколько моментов здесь:

1) Цитата jQuery и начальная загрузка ссылаются на ускорение CDN. Если вы не понимаете ускорения CDN, вы можете Baidu.

2) Компонент jQuery должен поддерживаться JQUERY 2.0 или выше. Если версия слишком низкая, будут исключения JS.

3) Компонент начальной загрузки не требуется, но для этого макета требуется некоторая поддержка в стиле начальной загрузки.

4) Компонент TOAST не требуется, он используется для отображения результатов победы здесь.

1. Попробуйте код эффекта удачи

HTML Part

 <div id = "triky"> <div style = "text-align: center"> <h1>, пожалуйста, выберите нужную еду </h1> <div> <div style = "margin: auto;"> <div id = "triky1"> <div> <img src = "/content/jquery-slotmachine-master/img/cookie. src = "/content/jquery-slotmachine-master/img/food2.jpg"/> </div> <div> <img src = "/content/jQuery-slotmachine-master/img/food2.jpg"/> </div> <div> <img src = "/content/jquery22 </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 () {// Попробуйте Luck var triky = $ ("#triky1"). Slotmachine ({Active: 2, // Индекс элемента, отображаемого во время инициализации // задержка: 150, // переключение времени интервала между двумя изображениями (Milliseconds единиц) // Рандомизирование: function () {// return 0; // Индекс выбираемой значения). });

Подробное объяснение общих свойств, методов и событий JS

(1) Метод инициализации var machine = $ ("#id"). Slotmachine ({}); Возвращает в данный момент вращающийся объект. Инициализированные параметры передаются в методе Slotmachine (), например,

Active: указывает индекс отображаемого элемента во время инициализации, начиная с 0

Задержка: переключить время интервала между двумя изображениями (миллисекундные единицы)

Auto: Будь то автоматически, значение верно или неверно

Спины: когда AUTO верно, это количество значков, которые пропускаются каждый раз

Stophidden: происходит ли анимация в начале и остановка, когда происходит анимация

Рандомизация: function (ActiveElementIndex) {} Это свойство представляет индекс выбранного значения после каждого вращения (начиная с 0)

Направление: направление анимации, значение (вверх || вниз)

(2) Общие методы

machine.shuffle (повторить, onstopcallback); Указывает начало вращения, повторение указывает количество изображений, пропущенных каждый раз; OnStopCallback указывает метод обратного вызова событий после остановки вращения.

machine.prev (); Возвращает предыдущий элемент

machine.next (); Возвращает следующий элемент

machine.stop (); Остановите вращение

Машина. Активность; Получает индекс выбранного элемента

Машина. обнаруживает, вращается ли он, истинно означает, что он вращается

Machine.topping; Обнаружение, остановился ли он

machine.destroy (); разрушает узел вращения

2. Пример кода эффекта простого консоли игровой консоли

HTML Part

 <div id = "Рандомиза"> <div style = "text-align: center; max-width: 900px;"> <h1> простая игра-консоль </h1> <div> <div> <div> <div> <div id = "machine1"> <div> <img src = "/content/jquery-slotmachine-master/img/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-slotmachine-master/ilsg/llot44. /></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> 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-master-master-master-master-master-master-master. /></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> 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-master-master-master-master-master-master-master. /> </div> <div> <img src = "/content/jquery-slotmachine-master/img/slot6.png"/> </div> </div> </div> </div> </div> </div> </div> </div> <div> <div role = "group"> <div = "ranmizebutbutton" </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 Part

 $ (function () {// Простая игровая консоль var machine1 = $ ("#machine1"). slotmachine ({active: 0, задержка: 500}); var machine2 = $ ("#machine2"). slotmachine ({acative: 1, задержка: 500, направление: 'down'}); var machine3 = $ ("#machine3").). arr = []; arr [1] || oncomplete);

3. Пример кода с эффектом одной остановки

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 = "diver"> <div id = "slotmachinebufffull" type = "button"> Stop </div> </div> </div> </div> </div> <div> </div> </div>

JS Part

 $ (function () {// Single Stop var machine4 = $ ("#casino1"). Slotmachine ({Active: 0, задержка: 500}); var machine5 = $ ("#casino2"). Slotmachine ({Active: 1, задержка: 550}); machine6 = $ ("#casino3"). $ ("#slotmachinebuttonshuffle"). Click (function () {start = 3; machine4.shuffle (); machine5.shuffle (); machine6.shuffle ();}); machine6.stop ();

3. Резюме

Весь процесс не сложный. Все свойства, события и методы могут быть легко поняты и применены путем чтения документации. О демонстрационном коде нечего сказать. Вы можете понять это на первый взгляд. Я надеюсь, что для всех будет полезно изучать компоненты JavaScript.