运行样式：
代码和注释参考代码中：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> body { background-image: url(cjbg.jpg); background-repeat: no-repeat; background-size: 100%; } * { margin-left: 0; padding-left: 0; } #title { width: 560px; height: 321px; margin: 200px auto 0 auto; } .shanDeng, .shanDeng2 { width: 858px; height: 858px; background-size: 100%; background-repeat: no-repeat; margin: 88px auto 0 auto; } .shanDeng { background-image: url(shandeng1.png); } .shanDeng2 { background-image: url(shandeng2.png); } #btn .cjBtnDom, #btn .cjBtn, .shanDeng .active, .shanDeng td { width: 140px; height: 140px; background-repeat: no-repeat; background-size: 100%; } #btn.cjBtn { background-image: url(buttonUp.png); } #btn.cjBtnDom { background-image: url(buttonDown.png); } #luck .active { background-image: url(active.png); } .shanDeng td { text-align: center; background-image: url(proBj.png); } .shanDeng table { padding-left: 63px; padding-top: 63px; } </style> </head> <body> <div class="shanDeng" id="deng1"> <div id="luck"> <!-- luck --> <table> <tbody> <tr> <td class="luck-unit luck-unit-0"><img src="1.png"></td> <td class="luck-unit luck-unit-1"><img src="3.png"></td> <td class="luck-unit luck-unit-2"><img src="0.png"></td> </tr> <tr> <td class="luck-unit luck-unit-7"><img src="2.png"></td> <td class="cjBtn" id="btn"></td> <td class="luck-unit luck-unit-3"><img src="5.png"></td> </tr> <tr> <td class="luck-unit luck-unit-6"><img src="6.png"></td> <td class="luck-unit luck-unit-5"><img src="4.png"></td> <td class="luck-unit luck-unit-4"><img src="7.png"></td> </tr> </tbody> </table> </div><!-- luckEnd --> </div> <script src="Scripts/jquery-1.8.2.min.js"></script> <script> var luck = { index: -1, //当前转动到哪个位置，起点位置 count: 0, //总共有多少个位置 timer: 0, //setTimeout的ID，用clearTimeout清除 speed: 20, //初始转动速度 times: 0, //转动次数 cycle: 50, //转动基本次数：即至少需要转动多少次再进入抽奖环节 prize: -1, //中奖位置 init: function (id) { if ($("#" + id).find(".luck-unit").length > 0) { $luck = $("#" + id); $units = $luck.find(".luck-unit"); this.obj = $luck; this.count = $units.length; $luck.find(".luck-unit-" + this.index).addClass("active"); }; }, roll: function () { var index = this.index; var count = this.count; var luck = this.obj; $(luck).find(".luck-unit-" + index).removeClass("active"); index += 1; if (index > count - 1) { index = 0; }; $(luck).find(".luck-unit-" + index).addClass("active"); this.index = index; return false; }, stop: function (index) { this.prize = index; return false; } }; function roll() { luck.times += 1; luck.roll(); if (luck.times > luck.cycle + 10 && luck.prize == luck.index) { clearTimeout(luck.timer); luck.prize = -1; luck.times = 0; click = false; } else { if (luck.times < luck.cycle) { luck.speed -= 10; } else if (luck.times == luck.cycle) { var index = Math.random() * (luck.count) | 0; luck.prize = index; } else { if (luck.times > luck.cycle + 10 && ((luck.prize == 0 && luck.index == 7) || luck.prize == luck.index + 1)) { luck.speed += 110; } else { luck.speed += 20; } } if (luck.speed < 40) { luck.speed = 40; }; luck.timer = setTimeout(roll, luck.speed); } return false; } //闪灯效果 var num = 0; $(".shanDeng").attr("class", function () { setInterval(function () { num++; if (num % 2 == 0) { $('#deng').addClass("shanDeng2"); } else { $('#deng').addClass("shanDeng"); $('#deng').removeClass('shanDeng2'); } }, 500) }) var click = false; window.onload = function () { luck.init('luck'); $("#btn").click(function () { //按下弹起效果 $("#btn").addClass("cjBtnDom"); setTimeout(function () { $("#btn").removeClass("cjBtnDom"); }, 200); if (click) { return false; } else { luck.speed = 100; roll(); click = true; return false; } }); }; </script> </body> </html> <script type="text/javascript"> function stops() { return false; } document.oncontextmenu = stops; </script>
下载地址：