用jquery通过配置参数实现抽奖转盘

1.html代码

<!DOCTYPE html>

<html lang="zh-CN">

    <head>

        <meta charset="UTF-8">

        <title>抽奖活动</title>

        <meta name="keyword" content="">

        <meta name="description" content="">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="renderer" content="webkit">

        <script type="text/javascript" src="js/jquery.js"></script>

        <!-- 业务样式 -->

        <link rel="stylesheet" type="text/css" href="css/index.css">

        <!--[if lt IE 9]>

        <link rel="stylesheet" href="http://static.51offer.com/skin/css/study-abroad-steps/ie.css"/>

        <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.效果图

源代码：http://files.cnblogs.com/files/gzx618/roll.zip

jquery实现抽奖转盘的更多相关文章

  1. 利用java实现抽奖转盘(着重安全控制)

    本文是针对jquery 实现抽奖转盘作者的一个补充(主要用java去实现转盘结果生成及存储,解决jquery 做法 非法用户采用模拟器实现改变转盘值的风险性),针对jQuery的具体实现,请看案例:h ...

  2. jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现

    jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现 在线实例 查看演示 完整代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

  3. jquery——九宫格大转盘抽奖

    一.用到的图片 二.代码如下,重点是js部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Con ...

  4. 使用CSS3+jquery.js 实现微信抽奖转盘效果

    上次发表了一篇 微信抽奖转盘活动-效果源码分析 最近想起了刚接到这个项目时第一时间脑海里迸出的解决方法 “CSS3”! 为什么不能用CSS3来实现呢? 所以我打算用CSS3来实现这个效果.并不需要依赖 ...

  5. 用jquery实现抽奖小程序

    用jquery实现抽奖小程序 这些日子,到处都可以看到关于微信小程序的新闻或报到,在博客园中写关于微信小程序的也不少.但是今天我要说的不是微信小程序,而是用简单的jquery写的一个好玩的抽奖小程序. ...

  6. jquery实现抽奖

    用jquery实现抽奖小程序   用jquery实现抽奖小程序 这些日子,到处都可以看到关于微信小程序的新闻或报到,在博客园中写关于微信小程序的也不少.但是今天我要说的不是微信小程序,而是用简单的jq ...

  7. Html5-Canvas实现简易的抽奖转盘

    ###Html5实现抽奖转盘效果 1.实现的基本效果 2.主要的内容 html5中canvas标签的使用 jQueryRotate.js旋转插件 3.主要html代码 <body> < ...

  8. 模仿抽奖转盘,并且用cookie记录历史次数

    自己制作了一个模仿抽奖转盘的小游戏,代码比较简单,规则是只有三次抽奖机会,并且浏览器会记录抽奖的次数, 代码如下 <!DOCTYPE html> <html> <head ...

  9. Android实现抽奖转盘

    一.SurfaceView认识及的应用的思路 SurfaceView继承自(extends)View,View是在UI线程中进行绘制: 而SurfaceView是在一个子线程中对自己进行绘制,优势:避 ...

随机推荐

  1. Oracle非重要文件恢复，redo、暂时文件、索引文件、password文件

    增量备份的应用在recovery阶段.不再restore阶段 了解数据库设置表: SQL>desc database_properties  Name                       ...

  2. [GIF] The Phase Property in GIF Loop Coder

    In this lesson, we look at one of the most powerful features in GIF Loop Coder, the phase property, ...

  3. [MODx] 1. Add Html5 template into the MODx

    1. Connet MODx by SSH: Go to the MODx cloud; Find you current user and right click selet Edit Cloud; ...

  4. ios开发——实用技术篇Swift篇&地址薄、短信、邮件

    //返回按钮事件 @IBAction func backButtonClick() { self.navigationController?.popViewControllerAnimated(tru ...

  5. 1043. Is It a Binary Search Tree (25)

    the problem is from pat,which website is http://pat.zju.edu.cn/contests/pat-a-practise/1043 and the ...

  6. focuskye 学习及下载

    学习:http://www.focusky.com.cn/tutorials/ 下载:http://www.focusky.com.cn/download/

  7. Spark_Api_图解

  8. C#_MySql 主从复制

    一.业务发展驱动数据发展 随着网站业务的不断发展,用户量的不断增加,数据量成倍地增长,数据库的访问量也呈线性地增长.特别是在用户访问高峰期间,并发访问量突然增大,数据库的负载压力也会增大,如果架构方案 ...

  9. Mybatis的简单示例

    首先新建一个JavaWeb项目并导入mybatis依赖的jar包,同时Mybatis是对数据库的操作所以我们需要在数据库中新建一个表user用来演示. 新建完表之后我们还需要建立相对应的实体类User ...

  10. ArcGis:vs c#编程遇到问题The specified filename is invalid

    出现这个问题总归一点那就是你没有添加一个控件axLicenseControl这个控件导致报这个错误