用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. 让java程序在后台一直执行（例如putty关闭后后台程序继续运行）

    如果在终端中执行java -jar xxx.jar&命令,当终端关闭时,xxx.jar也会同时结束运行,但是如果执行nohup java -jar xxx.jar&命令,则程序会在后台 ...

  2. 用CSV文件读写数据的两种方式(转)

    导读:有时候我们需要对收集的数据做统计,并在页面提供显示以及下载.除了对传统的excel存取之外,对CSV文件的存取也很重要.本文列出了这两种操作的详细代码. 代码: <?php $file = ...

  3. 关于php ci框架ie浏览器路径问题

    ie不能定位到这个location,而是在地址栏形成类似eg.com/index.php/class/class/class/fucntion (支持应该为eg.com/index.php/class ...

  4. c语言趣味

    改编java趣味100题,c语言版 1.C语言版金字塔 #include <stdio.h> int main() { int n,i,j,k; scanf("%d", ...

  5. Python学习笔记 第二课 循环

    >>> movies=["The Holy Grail", 1975, "The Life of Brian", 1979, "Th ...

  6. [辛酸历程]在Mac中使用Python获取屏幕截图

    一.起因 最近想做个小外挂玩玩,技术倒是不难,就是通过图片匹配加上一些判断方法来刷分.但是在最不起眼(却最容易出问题)的准备阶段卡住了. 为什么卡住了呢,简单说,因为我需要获取截屏的数据,所以就要找一 ...

  7. [Android]Log打印

    package com.lurencun.android.system; import android.util.Log; public class ExLog { static final Stri ...

  8. 知道网站PV流量,如何选何云主机配置带宽大小

  9. DOM操作在jQuery中的实用------文字提示和图片提示

    关于文字提示想必是家喻户晓,操作呢说简单一点就是在超链接中加入title属性.但是在人机交互越来越倍受恩宠的年代,依靠浏览器自带的文字提示即title属性,提示效果的响应速度就(还是人艰不拆了吧~)s ...

  10. MyBatis(3.2.3) - Multiple results as a map

    If we have a mapped statement that returns multiple rows and we want the results in a HashMap with s ...