用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. Cordova 3.0 + Eclipse 开发流程

    cd d:\cordova\projectscordova create HelloWorld com.example.helloworld HelloWorldcd HelloWorldcordov ...

  2. day06 Java面向对象

    1.对象内存图 (1)1个对象的内存图:一个对象的基本初始化过程 (2)2个对象的内存图:方法的共用 (3)3个对象的内存图:其中有两个引用指向同一个对象

  3. UNIX基础知识之信号

    本篇博文内容摘自<UNIX环境高级编程>(第二版),仅作个人学习记录所用.关于本书可参考:http://www.apuebook.com/. 信号(signal)是通知进程已发生某种情况的 ...

  4. mysql 优化工具

    explain  profiling 建议提供以下信息 show table status like 'audit';show create table audit;show index from a ...

  5. 如何使用Linux命令dhclient

    如何使用Linux命令 dhclient The Internet Systems Consortium DHCP Client, dhclient, provides a means for con ...

  6. Mac 下配置Tomcat7和eclipse中配置tomcat

    转载自: http://www.cnblogs.com/weilaikeji/archive/2013/05/29/3106473.html 1.下载Tomcat 从Tomcat项目主页下载相关压缩包 ...

  7. Swift 玩转gif

    众所周知,iOS默认是不支持gif类型图片的显示的,但是我们项目中常常是需要显示gif为动态图片.那肿么办?第三方库?是的 ,很多第三方都支持gif , 如果一直只停留在用第三方上,技术难有提高.上版 ...

  8. Storm中的LocalState 代码解析

    官方的解释这个类为: /** * A simple, durable, atomic K/V database. *Very inefficient*, should only be * used f ...

  9. cocos2d-x lua与c++简单交互

    cocos2d-x lua与c++简单交互 version: cocos2d-x 3.6 本文讲述lua与c++的一些简单交互: lua通过消息方式调用c++无参接口 c++调用lua带参接口 1.通 ...

  10. 快餐店运行模拟C++程序源码代写

    某快餐店供应若干种快餐和饮料(5种以上),早晨6:00开始营业,晚上11:00打烊.前一天已经安排了若干工人上班,快餐店的用餐位是固定的,每种食物的成本和销售价格是确定的,每种食物的总量是确定的,储存 ...