jquery實現抽獎轉盤

2024-04-27 15:01:25

字體：大中小

來源：轉載

供稿：網友

用jquery通過配置參數實現抽獎轉盤

1.html代碼

<!DOCTYPE html><html lang="zh-CN">    <head>        <meta charset="UTF-8">        <title>抽獎活動</title>        <meta name="keyWord" content="">        <meta name="descrjavascript" src="js/jquery.js"></script>        <!-- 業務樣式 -->        <link rel="stylesheet" type="text/CSS" href="css/index.css">        <!--[if lt IE 9]>        <link rel="stylesheet" />        <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>        <![endif]-->    </head>    <body>        <div class="container">            <div class="container_wrap">                <div class="container_left clearfix" id="zhuanpan">                    <div class="zhuanpan">                        <ul class="zhuanpan1">                            <li class="libao"></li>                            <li class="mobile_shell"></li>                            <li class="note"></li>                            <li class="better"></li>                            <li class="quan"></li>                            <li class="tshirt"></li>                        </ul>                    </div>                    <img class="choujiang" src="img/choujiang.png">                    <img class="have_choujiang" src="img/reward.png">                </div>            </div>        </div>        <script type="text/Javascript" src="js/index.js"></script>    </body></html>

2.調用的js

var config = {    "rollId": '#rollId', //外層divid    "rollBtn": ".rollBtn", //點擊滾動的按鈕--class    "rollList": ".rollList",    "pinIndex": 0, //滾動的起點    "speed": 200, //滾動的速度    "cycle": 0, //滾動的圈數    "fastCycle": 5, //快速滾動圈數    "rollResult": 4 //抽獎的結果};var Roll = function() {    var self = this;    self.config = config;    self.stopIndex = '';    self.isRolling = false;    self.timer = null;    self.ops = '';    self.rollId = '';    self.rollBtn = '';    self.rollList = '';    self.rollIndex = 0;}var roll=new Roll();$(function(){	$(".choujiang").on("click",function(){		rollFun(4);	});})function rollFun(PRize_code) {    roll.init({        "rollId": '#zhuanpan',        "rollBtn": ".choujiang",        "rollList": ".zhuanpan1",        "pinIndex": 0,        "rollResult": prize_code    });    roll.start();}Roll.prototype.init = function(options) {    var self = this;    self.ops = $.extend({}, self.config, options);    self.rollId = $(self.ops.rollId);    self.rollBtn = self.rollId.find(self.ops.rollBtn);    self.rollList = self.rollId.find(self.ops.rollList).find('li');    self.stopIndex = self.ops.rollResult;};// 按鈕事件Roll.prototype.start = function() {    this.rollPre();};Roll.prototype.rollPre = function() {    var self = this;    if (!self.isRolling) {        self.rollList.eq(self.ops.pinIndex).show().siblings().hide();        rollStart(self); // 開始啟動轉盤    }};// 指向下一個function rollGoNext(self) {    self.rollIndex += 1;    if (self.rollIndex > self.rollList.length) {        self.rollIndex = 0;        self.ops.cycle++;    }    self.rollList.eq(self.rollIndex).show().siblings().hide();}// 停止轉動function rollStop(self) {    clearInterval(self.timer);    (function stopGoNext() {        if (self.rollIndex !== self.stopIndex) {            rollGoNext(self);            setTimeout(function() {                stopGoNext();            }, 300);        } else {            self.isRolling = false;            self.ops.cycle = 0;            self.rollIndex = 0;            $(".choujiang").hide();            $(".have_choujiang").show();            // self.ev.trigger('succeed', {            //     rollResult: self.stopIndex            // });        }    })();}//開始轉動function rollStart(self) {    self.isRolling = true;    self.timer = setInterval(function() {        rollGoNext(self);        if (self.rollIndex == 5) {            clearInterval(self.timer);            self.ops.speed = 20;            self.timer = setInterval(function() {                rollGoNext(self);                if (self.ops.cycle >= 5) {                    clearInterval(self.timer);                    self.ops.speed = 200;                    self.timer = setInterval(function() {                        if (self.ops.cycle === 6) {                            rollStop(self);                        } else {                            rollGoNext(self);                        }                    }, self.ops.speed);                }            }, self.ops.speed);        }    }, self.ops.speed);}

3.效果圖