JS componente slotmachine percebe o efeito de loteria de produção de comutação de imagem Sistema de loteria

Autor：Eve Cole Data da Última Atualização：2025-07-21 12:00:03

Prefácio: Dois dias atrás, eu estava procurando componentes on -line e acidentalmente descobri o "componente de slotmachine" do nosso efeito de console de jogos de infância. Depois de navegá -lo, evoca as memórias da minha infância.

Vamos levá -lo a dar uma olhada em um componente tão mágico - slotmachine.

1. Visualização de componentes

Vamos obter um efeito simples primeiro

Acha que é muito simples? Não se preocupe, o bom show está chegando, tente sua sorte primeiro.

O que? Ainda não alcançando o efeito desejado, bom! Abaixo, o efeito real será lançado.

Cliquei por um longo tempo, mas não ganhei o prêmio. Não é de admirar que eu não pudesse ganhar quando era criança. Não acredito no mal, continuo clicando e iniciando e finalmente ganhei o prêmio uma vez. Realmente não é fácil.

E nossos resultados da loteria do final do ano, comece! parar!

2. Exemplos de código

Como é um componente JS, você deve primeiro baixar a biblioteca de componentes. Primeiro poste o endereço de código aberto

Então vamos dar uma olhada na referência do arquivo:

A cópia do código é a seguinte: <link rel = "Stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.6/css/bootstrap.min.css" Integrity = "SHA384-1Q8MTJOASX8J1AU+A5WDVNPI2LKFFWWEAA8HDDDJZLPLEGXHJVME1FGJWPGMKZS7" Crossorigin = "Anonymous">

Alguns pontos a serem observados aqui:

1) Quote jQuery e bootstrap são referenciados através da aceleração da CDN. Se você não entende a aceleração da CDN, pode Baidu.

2) O componente jQuery deve ser suportado pelo JQuery 2.0 ou superior. Se a versão estiver muito baixa, haverá exceções JS.

3) O componente de bootstrap não é necessário, mas esse layout requer algum suporte ao estilo de bootstrap.

4) O componente do TOAST não é necessário, é usado para exibir os resultados vencedores aqui.

1. Experimente o código de efeito da sorte

parte html

 <div id = "triky"> <div style = "text-align: center"> <h1> Por favor, selecione os alimentos que você deseja </h1> <div> <div style = "margem: auto;"> <div id = "Triky1"> <div> <mg src = "/content/jQuery-slotmachine-p-mestre/iMgyie/cookie.p <mg src ="/content/jquery-slotmachine>/iMgie.P <mgwie. src = "/content/jQuery-slotmachine-mestres/img/food2.jpg"/> </div> <div> <img src = "/content/jquery-slotmachine-mestre/img/food2.jpg"/> </div> <mg src = "//jQuerylotMotm </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 parte

 $ (function () {// Tente a sorte var triky = $ ("#triky1"). slotmachine ({ativo: 2, // o índice do item exibido durante a inicialização // atraso: 150, // alternar o tempo de intervalo entre duas figuras (milissegundos) ///11/11) // $ ("#TrikyShuff"). Clique em (function () {Triky.Shuffle (8); // Iniciar o método de rotação, o parâmetro 8 significa que 8 ícones são ignorados a cada rotação});

Explicação detalhada das propriedades, métodos e eventos comuns do JS

(1) método de inicialização var máquina = $ ("#id"). Slotmachine ({}); Retorna o objeto atualmente girado. Os parâmetros inicializados são passados no método slotmachine (), por exemplo

Ativo: indica o índice do item exibido durante a inicialização, a partir de 0

Atraso: alterne o tempo de intervalo entre duas fotos (unidades de milissegundos)

Auto: se deve girar automaticamente, o valor é verdadeiro ou falso

giros: quando o automóvel é verdadeiro, este é o número de ícones que são ignorados a cada vez

StopHidden: se a animação no início e a parada ocorre quando a animação ocorre

randomize: function (ActiveElementIndex) {} Esta propriedade representa o índice do valor selecionado após cada rotação (a partir de 0)

Direção: a direção da animação, valor (up || para baixo)

(2) Métodos comuns

Machine.Shuffle (Repita, OnStopCallback); Indica o início da rotação, a repetição indica o número de imagens ignoradas a cada vez; OnstopCallback indica o método de retorno de chamada do evento após a parada de rotação.

máquina.prev (); Retorna o elemento anterior

máquina.Next (); Retorna o próximo elemento

máquina.stop (); pare de rotação

máquina.Active; recebe o índice do elemento selecionado

MACHER.RUNNING; detecta se está girando, verdadeiro significa que está girando

Machine.Stopping; Detecção se ele parou

máquina.Destroy (); destrói o nó de rotação

2. Exemplo de código de efeito do console de jogo simples

parte html

 <div id = "randomize"> <div style = "text-align: Center; max-width: 900px;"> <h1> console de jogo simples </h1> <div> <div> <div> <div> <div id = "Machine1"> 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-mestre/img/slot2.png"/> </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-mestre/img/slot5.png"/> </div> <div> <img src = "/content/jQuery-slotmachine-mestre/img/slot6.png"/</</> </> <//> <//> </e </> <div> <img src = "/content/jQuery-slotmachine-master/img/slot1.png"/> </div> <div> <img src = "/content/jQuery-slotmachine-mestre/img/slot2.png"/> </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-mestre/img/slot6.png"/> </div> </div> </div> </div> </div> <brotlenomizebt </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>

JS parte

 $ (function () {// Console de jogo simples var máquina1 = $ ("#máquina1"). slotMachine ({ativo: 0, atraso: 500}); var máquina2 = $ ("#máquina2"). var = []; ||. Settimeout (function () {Machine2.Shuff (5, Oncomplete);}, 500);

3. Exemplo de código de efeito de parada única

Parte html

 <div id = "cassino" style = "Padding-top: 50px;"> <div> <h1> sorteio </h1> <div> <div id 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> <butão <blot role = "group"> <dd = "slotmachinebuttonfluffffuil" " type = "Button"> Stop </div> </div> </div> </div> </div> <div> </div> </div>

JS parte

 $ (function () {// SOPAT STOP var Machine4 = $ ("#Casino1"). SlotMachine ({Active: 0, Atraso: 500}); var Machine5 = $ ("#casino2"). $ ("#slotMachineButtonShuff"). Clique em (function () {iniciado = 3; Machine4.Shuffle (); Machine5.Shuffle (); Machine6.Shuffle ();}); Machine6.Stop ();

3. Resumo

Todo o processo não é complicado. Todas as propriedades, eventos e métodos podem ser entendidos e aplicados facilmente lendo a documentação. Não há nada a dizer sobre o código de demonstração. Você pode entender isso à primeira vista. Espero que seja útil para todos aprenderem componentes JavaScript.