js組件SlotMachine實(shí)現(xiàn)圖片切換效果制作抽獎(jiǎng)系統(tǒng)

更新時(shí)間：2016年04月17日 15:13:50 作者：懶得安分

這篇文章主要介紹了js組件SlotMachine實(shí)現(xiàn)圖片切換效果制作抽獎(jiǎng)系統(tǒng)的相關(guān)資料,需要的朋友可以參考下

前言：前兩天在網(wǎng)上找組件，無(wú)意中發(fā)現(xiàn)了我們兒時(shí)游戲機(jī)效果的“SlotMachine組件”，瀏覽一遍下來(lái)，勾起了小時(shí)候滿滿的回憶。

下面就帶著大家來(lái)看看這么一個(gè)神奇的組件——SlotMachine吧。

一、組件預(yù)覽

先來(lái)一發(fā)簡(jiǎn)單的效果壓壓驚

覺(jué)得太簡(jiǎn)單？別急，好戲在后頭，試試手氣先。

什么？還沒(méi)達(dá)到想要的效果，好！下面，真實(shí)效果來(lái)一發(fā)。

點(diǎn)擊了好長(zhǎng)時(shí)間，都沒(méi)有中獎(jiǎng)，難怪小時(shí)候怎么都贏不了呢。不信邪，繼續(xù)點(diǎn)擊開(kāi)始，終于有一次中獎(jiǎng)的了，真心不容易。

還有我們年終抽獎(jiǎng)效果，開(kāi)始！停止！

二、代碼示例

既然是js組件，肯定是先要下載組件庫(kù)。首先貼上開(kāi)源地址

然后來(lái)看看文件的引用：

復(fù)制代碼代碼如下:

這里需要注意幾點(diǎn)：

1）、引用jquery和bootstrap都是通過(guò)cdn加速的方式引用的，不懂cdn加速的可以百度。
2）、Jquery組件必須，并且組件需要Jquery 2.0以上版本的支持，版本太低會(huì)有js異常。
3）、bootstrap組件并非必須，但是本篇布局需要部分bootstrap的樣式支持。
4）、toastr組件并非必須，此處用于顯示中獎(jiǎng)的結(jié)果。
1、試試手氣效果代碼
html部分

<div id="triky">
 <div class="content" style="text-align: center">
  <h1>請(qǐng)選擇你想吃的食物</h1>

  <div class="row">
  <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/food1.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 class="btn-group btn-group-justified btn-group-triky" style="margin-left:-15px" role="group">
    <div id="trikyShuffle" type="button" class="btn btn-primary btn-lg">試試手氣</div>
   </div>
   </div>
  </div>
  </div>
 </div>

 <div class="clearfix"></div>
 </div>

JS部分

$(function () {
  //試試手氣
  var triky = $("#triky1").slotMachine({
  active: 2, //初始化的時(shí)候顯示的項(xiàng)的索引
  //delay: 150,//切換兩張圖片的間隔時(shí)間（毫秒單位）
  //randomize: function () {
  // return 0;//每次旋轉(zhuǎn)后選中值的索引（從0開(kāi)始）
  //}
  });

  $("#trikyShuffle").click(function () {
  triky.shuffle(8);//開(kāi)始旋轉(zhuǎn)方法，參數(shù)8表示每次旋轉(zhuǎn)跳過(guò)8個(gè)圖標(biāo)
  });
 });

JS常用屬性、方法、事件詳解

（1）初始化方法 var machine = $("#id").slotMachine({}); 返回當(dāng)前旋轉(zhuǎn)的對(duì)象。slotMachine()方法里面?zhèn)鬟f初始化的參數(shù)，比如

active：表示初始化的時(shí)候顯示項(xiàng)的索引，從0開(kāi)始
delay：切換兩張圖片的間隔時(shí)間（毫秒單位）
auto：是否自動(dòng)旋轉(zhuǎn)，取值為true or false
spins：當(dāng)auto為true的時(shí)候，這是每次跳過(guò)圖標(biāo)的個(gè)數(shù)
stophidden：是否出現(xiàn)開(kāi)始和停止時(shí)候的動(dòng)畫(huà)
randomize:function(activeElementIndex){}此屬性表示每次旋轉(zhuǎn)后選中值的索引（從0開(kāi)始）
direction：動(dòng)畫(huà)的方向，取值（up||down）
（2）常用方法

machine.shuffle( repeat, onStopCallback ); 表示開(kāi)始旋轉(zhuǎn)，repeat表示每次跳過(guò)的圖片個(gè)數(shù)；onstopCallback表示旋轉(zhuǎn)停止后的事件回調(diào)方法。
machine.prev(); 返回前一個(gè)元素
machine.next(); 返回后一個(gè)元素
machine.stop(); 停止旋轉(zhuǎn)
machine.active; 得到選中的元素的索引
machine.running; 檢測(cè)是否正在旋轉(zhuǎn)，true表示正在旋轉(zhuǎn)
machine.stopping; 檢測(cè)是否已經(jīng)停止
machine.destroy(); 摧毀旋轉(zhuǎn)節(jié)點(diǎn)
2、簡(jiǎn)單游戲機(jī)效果代碼示例
html部分

<div id="randomize">
 <div class="content container" style="text-align: center;max-width: 900px;">
  <h1>簡(jiǎn)易游戲機(jī)</h1>

  <div class="row">
  <div class="col-xs-4">
   <div>
   <div id="machine1" class="randomizeMachine">
    <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 class="col-xs-4">
   <div>
   <div id="machine2" class="randomizeMachine">
    <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 class="col-xs-4">
   <div>
   <div id="machine3" class="randomizeMachine">
    <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 class="btn-group btn-group-justified btn-group-randomize" role="group">
   <div id="ranomizeButton" type="button" class="btn btn-danger btn-lg">開(kāi)始</div>
  </div>
  </div>
 </div>
 </div>

JS部分

$(function () {
  //簡(jiǎn)易游戲機(jī)
  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("恭喜你中獎(jiǎng)了！");
   }
   else if (arr[0] == arr[1] || arr[0] == arr[2] || arr[1] == arr[2]) {
   toastr.success("還差一點(diǎn)，繼續(xù)加油");
   }
   else {
   toastr.success("手氣不行");
   }
   arr = [];
  }
  }

  $("#ranomizeButton").click(function () {

  machine1.shuffle(5, onComplete);

  setTimeout(function () {
   machine2.shuffle(5, onComplete);
  }, 500);

  setTimeout(function () {
   machine3.shuffle(5, onComplete);
  }, 1000);

  })
 });

3、單個(gè)停止效果代碼示例
Html部分

<div id="casino" style="padding-top:50px;">
 <div class="content">
  <h1>抽獎(jiǎng)</h1>

  <div>
  <div id="casino1" class="slotMachine" style="margin-left: -65px;">
   <div class="slot slot1"></div>
   <div class="slot slot2"></div>
   <div class="slot slot3"></div>
   <div class="slot slot4"></div>
   <div class="slot slot5"></div>
   <div class="slot slot6"></div>
  </div>

  <div id="casino2" class="slotMachine">
   <div class="slot slot1"></div>
   <div class="slot slot2"></div>
   <div class="slot slot3"></div>
   <div class="slot slot4"></div>
   <div class="slot slot5"></div>
   <div class="slot slot6"></div>
  </div>

  <div id="casino3" class="slotMachine">
   <div class="slot slot1"></div>
   <div class="slot slot2"></div>
   <div class="slot slot3"></div>
   <div class="slot slot4"></div>
   <div class="slot slot5"></div>
   <div class="slot slot6"></div>
  </div>

  <div class="btn-group btn-group-justified btn-group-casino" role="group">
   <div id="slotMachineButtonShuffle" type="button" class="btn btn-primary btn-lg">開(kāi)始</div>
   <div id="slotMachineButtonStop" type="button" class="btn btn-primary btn-lg">停止</div>
  </div>
  </div>

 </div>
 <div class="clearfix"></div>
 </div>

JS部分

$(function () {
  //單個(gè)停止
  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--;
  });
 });

三、總結(jié)
整個(gè)過(guò)程并不復(fù)雜，所有的屬性、事件、方法基本看看文檔都能很好理解運(yùn)用，演示代碼也沒(méi)什么好說(shuō)的，一看就懂，希望對(duì)大家學(xué)習(xí)javascript組件有所幫助。