用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. 数据恢复软件使用经验-支持U盘，手机SD卡，硬盘数据，解决图片恢复后打不开的问题

    数据恢复软件使用经验-支持U盘,手机SD卡,硬盘数据.解决图片恢复后打不开的问题. 用过非常多数据恢复软件.最早EasyRecovery pro.恢复过U盘.手机SD卡,硬盘数据.但如今下载不了最新版 ...

  2. MySQL并发复制系列三：MySQL和MariaDB实现对比

    http://blog.itpub.net/28218939/viewspace-1975856/ 并发复制(Parallel Replication) 系列三:MySQL 5.7 和MariaDB ...

  3. Linux 内核动态函数调用可视化工具

    要求: python .7以上 https://www.python.org/ftp/python/ EG:wget --no-check-certificate https://www.python ...

  4. PAT 1020

    1020. Tree Traversals (25) Suppose that all the keys in a binary tree are distinct positive integers ...

  5. 构建千万级web访问架构

    . HTML静态化 其实大家都知道,效率最高.消耗最小的就是纯静态化的html页面,所以我们尽可能使我们的网站上的页面采用静态页面来实现,这个最简单的方法其实也是最有效的方法.但是对于大量内容并且频繁 ...

  6. 20+ Rsync command’s switches and common usages with examples – Unix/Linux--reference

    reference:http://crybit.com/rsync-commands-switches/ The “rsync” is a powerful command under the Lin ...

  7. vim中光标的前进和后退

    流行的文本编辑器通常都有前进和后退功能,可以在文件中曾经浏览过的位置之间来回移动.在 vim 中使用 Ctrl-O 执行后退,使用 Ctrl-I 执行前进.相关帮助: :help CTRL-O  :h ...

  8. python 调用zabbix api接口实现主机的增删改查

    python程序调用zabbix系统的api接口实现对zabbix_server端主机的增删改查,使用相关功能时候,需要打开脚本中的相关函数. 函数说明: zabbixtools()  调用zabbi ...

  9. struts2.1笔记02：servlet简介

    1.     Servlet 是在服务器上运行的小程序.这个词是在 Java applet的环境中创造的,Java applet 是一种当作单独文件跟网页一起发送的小程序,它通常用于在客户端运行,结果 ...

  10. github使用成长记

    学校里一直都有自己写一些网页,一方面为了学习熟练技能,另一方面也是兴趣所在.但是独乐乐不如众乐乐,一直向往有那么一个平台能把自己做得东西分享给广大网友,并且想借着分享的契机和各位程序猿交流学习心得(这 ...