js组件SlotMachine实现图片切换效果制作抽奖系统(2)

machine.shuffle( repeat, onStopCallback ); 表示开始旋转，repeat表示每次跳过的图片个数；onstopCallback表示旋转停止后的事件回调方法。
 machine.prev(); 返回前一个元素
 machine.next(); 返回后一个元素
 machine.stop(); 停止旋转
 machine.active; 得到选中的元素的索引
 machine.running; 检测是否正在旋转，true表示正在旋转
 machine.stopping; 检测是否已经停止
 machine.destroy(); 摧毁旋转节点
2、简单游戏机效果代码示例
html部分

<div> <div> <h1>简易游戏机</h1> <div> <div> <div> <div> <div><img src="https://www.jb51.net/Content/jQuery-SlotMachine-master/img/slot1.png" /></div> <div><img src="https://www.jb51.net/Content/jQuery-SlotMachine-master/img/slot2.png" /></div> <div><img src="https://www.jb51.net/Content/jQuery-SlotMachine-master/img/slot3.png" /></div> <div><img src="https://www.jb51.net/Content/jQuery-SlotMachine-master/img/slot4.png" /></div> <div><img src="https://www.jb51.net/Content/jQuery-SlotMachine-master/img/slot5.png" /></div> <div><img src="https://www.jb51.net/Content/jQuery-SlotMachine-master/img/slot6.png" /></div> </div> </div> </div> <div> <div> <div> <div><img src="https://www.jb51.net/Content/jQuery-SlotMachine-master/img/slot1.png" /></div> <div><img src="https://www.jb51.net/Content/jQuery-SlotMachine-master/img/slot2.png" /></div> <div><img src="https://www.jb51.net/Content/jQuery-SlotMachine-master/img/slot3.png" /></div> <div><img src="https://www.jb51.net/Content/jQuery-SlotMachine-master/img/slot4.png" /></div> <div><img src="https://www.jb51.net/Content/jQuery-SlotMachine-master/img/slot5.png" /></div> <div><img src="https://www.jb51.net/Content/jQuery-SlotMachine-master/img/slot6.png" /></div> </div> </div> </div> <div> <div> <div> <div><img src="https://www.jb51.net/Content/jQuery-SlotMachine-master/img/slot1.png" /></div> <div><img src="https://www.jb51.net/Content/jQuery-SlotMachine-master/img/slot2.png" /></div> <div><img src="https://www.jb51.net/Content/jQuery-SlotMachine-master/img/slot3.png" /></div> <div><img src="https://www.jb51.net/Content/jQuery-SlotMachine-master/img/slot4.png" /></div> <div><img src="https://www.jb51.net/Content/jQuery-SlotMachine-master/img/slot5.png" /></div> <div><img src="https://www.jb51.net/Content/jQuery-SlotMachine-master/img/slot6.png" /></div> </div> </div> </div> </div> <div> <div role="group"> <div type="button">开始</div> </div> </div> </div> </div>

JS部分

$(function () { //简易游戏机 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("恭喜你中奖了！"); } else if (arr[0] == arr[1] || arr[0] == arr[2] || arr[1] == arr[2]) { toastr.success("还差一点，继续加油"); } 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、单个停止效果代码示例
Html部分

<div> <div> <h1>抽奖</h1> <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></div> <div></div> <div></div> </div> <div role="group"> <div type="button">开始</div> <div type="button">停止</div> </div> </div> </div> <div></div> </div>

JS部分