JS 구성 요소 Slotmachine 이미지 스위칭 효과 생산 복권 시스템을 실현합니다.

저자：Eve Cole 업데이트 시간：2025-07-21 12:00:03

서문 : 이틀 전, 나는 온라인으로 구성 요소를 찾고 있었고 실수로 어린 시절 게임 콘솔 효과의 "슬롯 마신 구성 요소"를 발견했습니다. 그것을 탐색 한 후, 그것은 내 어린 시절의 기억을 불러 일으 킵니다.

그런 마법의 구성 요소 인 슬롯 마신을 살펴 보겠습니다.

1. 구성 요소 미리보기

먼저 간단한 효과를 얻자

너무 간단하다고 생각하십니까? 걱정하지 마세요, 좋은 쇼가오고 있습니다. 먼저 행운을 시험해보십시오.

무엇? 원하는 효과를 아직 달성하지 못합니다. 아래에서 실제 효과는 공개됩니다.

오랫동안 클릭했지만 상을받지 못했습니다. 내가 어렸을 때 이길 수 없다는 것은 놀라운 일이 아닙니다. 나는 악을 믿지 않고 계속 클릭하고 시작하며 마침내 한 번 상을 받았습니다. 정말 쉽지 않습니다.

그리고 우리의 연말 복권 결과, 시작! 멈추다!

2. 코드 예제

JS 구성 요소이므로 먼저 구성 요소 라이브러리를 다운로드해야합니다. 먼저 오픈 소스 주소를 게시하십시오

그런 다음 파일 참조를 살펴 보겠습니다.

코드 사본은 다음과 같습니다. <link rel = "스타일 시트"href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 무결성 = "SHA384-1Q8MTJOASX8J1AU+A5WDVNPI2LKFFWWEAA8HDDDDJZLPLEGXHJVME1FGJWPGMKZS7"Crossorigin = "익명">

<스크립트 src = "~/content/jquery-slotmachine-master/dist/jquery.slotmachine.js"> </script>

여기에 주목해야 할 몇 가지 요점이 있습니다.

1) 인용 jQuery와 부트 스트랩은 모두 CDN 가속도를 통해 참조됩니다. CDN 가속도를 이해하지 못하면 바이두를 할 수 있습니다.

2) jQuery 구성 요소는 jQuery 2.0 이상에 의해 지원되어야합니다. 버전이 너무 낮 으면 JS 예외가 있습니다.

3) 부트 스트랩 구성 요소는 필요하지 않지만이 레이아웃에는 부트 스트랩 스타일 지원이 필요합니다.

4) Toast 구성 요소는 필요하지 않으며 여기에 승리 결과를 표시하는 데 사용됩니다.

1. Luck Effect 코드를 사용해보십시오

HTML 부분

 <div id = "triky"> <div style = "text-align : center"> <h1> 원하는 음식을 선택하십시오 </h1> <div> <div style = "margin : auto;"> <div id = "triky1"> <div> <img src = "/inconts/imquery-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/content/jquery-slotmachine/graster/choople/choople/gr/gr/oogle/graster/grass </div> <div> <div style = "margin-left : -15px"역할 = "group"> <div id = "trikyshuffl"type = "button"> 행운 </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, // 두 그림 사이의 간격 시간을 전환합니다 (Milliseconds Units) // randomize : function () {// return 0; in indect (// 0)); $ ( "#trikyshuffle"). Click (function () {triky.shuffle (8); // 회전 메소드를 시작합니다. 매개 변수 8);

공통 JS 속성, 방법 및 이벤트에 대한 자세한 설명

(1) 초기화 방법 var machine = $ ( "#id"). Slotmachine ({}); 현재 회전 된 객체를 반환합니다. 초기화 된 매개 변수는 예를 들어 SlotMachine () 메소드로 전달됩니다.

Active : 초기화 중에 표시된 항목의 인덱스를 0부터 시작합니다.

지연 : 두 그림 사이의 간격 시간을 전환합니다 (밀리 초 단위)

Auto : 자동으로 회전할지 여부, 값은 true 또는 false입니다.

스핀 : Auto가 사실 일 때, 이것은 매번 건너 뛰는 아이콘 수입니다.

STOPHIDDEN : 애니메이션이 발생할 때 시작과 중지의 애니메이션이 발생하는지 여부

randomize : function (activeElementIndex) {}이 속성은 각 회전 후 선택된 값의 색인을 나타냅니다 (0부터 시작)

방향 : 애니메이션의 방향, 값 (up || down)

(2) 일반적인 방법

machine.shuffle (반복, onstopcallback); 회전 시작을 나타냅니다. 반복은 매번 건너 뛰는 그림의 수를 나타냅니다. 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> 간단한 게임 콘솔 </h1> <div> <div> <div> <div id = "machine1"> <div> <img src = "/jquery-slotmachine-master/img/img/slot1.png"/>>>>>>> </img " src = "/content/jquery-slotmachine-master/img/slot2.png"/> </div> <div> <img src = "/content/jquery-slotmachine-master/img/slot3.png"/</div> <img src = "/content/content/jquery-slotmachine/img/slot 44 /> </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> <div> <IMG SRC = "/content/jucter-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/img/slot4.png"/</div> <img src = "/content/content/jquery-slotmachine/img/slot5. /> </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> <IMG SRC = "/content/jucter-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/img/slot4.png"/</div> <img src = "/content/content/jquery-slotmachine/img/slot5. /> </div> <div> <IMG SRC = "/content/jucter-slotmachine-master/img/slot6.png"/> </div> </div> </div> </div> </div> </div> </div> <div> <group "> </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"). Slotmachine ({active : 1, direction : 'down'}); var machine3 = $ ( "#machinac3"); var = [Active) {arr.length <= 1) {arr.length> 1) {Ar ARR [0] || oncomplete (function) {machine2.shuffer (5, oncomplete), 500);

3. 단일 정지 효과 코드 예제

HTML 부분

 <div id = "casino"style = "padding-top : 50px;"> <div> <h1> 추첨 </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 role = "group"> <div id = "slotmachinebuttonshuff"type = "버튼"> type = "button"> stop </div> </div> </div> </div> </div> <div> </div> </div>

JS 부분

 function () {// 단일 정지 var machine4 = $ ( "#casino1"). Slotmachine ({active : 0, delay : 500}); var machine5 = $ ( "#casino2"). Slotmachine ({active : 1, 지연 : 550}); machine6 = $ ( "#casino 3"); $ ( "#slotmachinebuttonshuff"). click (function () {started = 3; machine4.shuffle (); machine6.shuffer ();}); click (function () {switch (switch (switch) {case 4.); machine6.stop ();

3. 요약

전체 프로세스는 복잡하지 않습니다. 모든 속성, 이벤트 및 메소드는 문서를 읽음으로써 쉽게 이해하고 적용 할 수 있습니다. 데모 코드에 대해 할 말이 없습니다. 언뜻보기에 이해할 수 있습니다. 모든 사람이 JavaScript 구성 요소를 배우는 것이 도움이되기를 바랍니다.