基于 HTML + CSS + jQuery 打造的 PC 端大转盘抽奖营销页模板。开箱即用，替换品牌素材即可上线。
转盘抽奖是拉新促活转化率最高的活动形式之一，但从前端实现角度并不简单：转盘旋转减速的缓动控制、中奖结果的随机映射、领奖弹窗与二维码引导、营造氛围的实时中奖滚动——每一项都要单独开发调试。这套模板基于成熟的 awardRotate 旋转插件把整套抽奖链路完整实现，改奖品文案、换转盘图，一个可上线的抽奖页就成了。
模板为 PC 端布局（1180px 居中版式），红色营销视觉，适配品牌推广、节日活动等桌面端投放场景。
模板亮点
1. 完整的转盘抽奖交互
基于 awardRotate 插件实现 6 奖区转盘：点击指针启动后先加速再减速（8 秒时长、5 圈 + 目标角度），动画结束回调中根据奖项弹出中奖弹窗或”谢谢参与”提示，并以 bRotate 状态锁防止旋转期间重复点击。中奖概率、奖品文案、对应角度全部集中在一段 switch 配置中，调整奖品如同填表。
2. 营销氛围三件套
- 活动倒计时：双端同步的”剩余活动时间”每秒刷新，到期自动显示”已结束”，营造紧迫感
- 实时数据展示：自动读取系统当前日期生成”截止时间”，叠加”已有 1245 位用户参与抽奖”的社会证明
- 幸运用户滚动墙：中奖列表无缝向上滚动（自研 marquee，鼠标悬停暂停），滚动播报营造”人人中奖”的热度
3. 中奖领奖转化闭环
中奖后弹出 Reveal 模态弹窗：恭喜中奖 → 奖品名称 → 微信二维码 →”扫一扫马上领取”，领奖路径一步到位。弹窗样式与遮罩已内置，替换二维码图片即可对接自有公众号 / 客服体系。
4. 活动规则与合规模块
底部预留活动规则区（参与次数限制、解释权声明）与运营文案位，金融、电商类活动所需的免责声明结构直接可用。
5. 红金营销视觉体系
正红主色（#c72325）页面底色搭配转盘金色指针与奖区扇面，视觉重心牢牢锁定在转盘上；左右分栏布局（转盘 + 中奖滚动墙）信息密度合理，一屏容纳全部活动要素。
6. 轻量纯静态，部署即用
仅依赖 jQuery 1.7.2 + awardRotate + jquery.reveal 三个本地脚本，无构建、无后端，任意静态托管上传即上线，也可嵌入门户活动位 iframe 使用。
技术栈
| 技术 | 版本 | 用途 |
|---|---|---|
| HTML | – | 页面结构 |
| CSS | – | 全站样式（单文件 style.css） |
| jQuery | 1.7.2 | DOM / 事件 / 动画驱动 |
| awardRotate.js | – | 转盘旋转缓动插件 |
| jquery.reveal.js | – | 中奖结果模态弹窗 |
| 自研 marquee | – | 幸运用户列表无缝滚动 |
| 自研倒计时 | – | 活动剩余时间每秒刷新 |
项目结构
blbtgcj/
├── index.html # 唯一入口：转盘抽奖活动页（全部功能）
├── css/
│ └── style.css # 全站样式（正红主色 #c72325）
├── js/
│ ├── jquery.js # jQuery 1.7.2
│ ├── awardRotate.js # 转盘旋转插件
│ └── jquery.reveal.js # 模态弹窗插件
└── img/ # 活动素材：转盘盘面、指针、二维码等快速开始
纯静态模板，无需安装依赖：
# 方式一：浏览器直接打开
双击 index.html 即可体验转盘抽奖
# 方式二：本地静态服务器
python3 -m http.server 8000
# 访问 http://localhost:8000
# 方式三：VS Code Live Server 插件，右键 index.html → Open with Live Server二次开发指南
| 需求 | 操作 |
|---|---|
| 更换奖品 / 概率 | 修改 index.html 内 switch (item) 配置：奖项文案、旋转角度、随机区间 |
| 更换转盘视觉 | 替换 img/turntable.png（盘面）与 img/pointer.png（指针）同名覆盖 |
| 修改活动时间 | 修改 count_down('Djs_id_1','Djs_id_2','2016-06-30 23:59:59') 截止时间 |
| 更换领奖二维码 | 替换弹窗内 img/awm.jpg 二维码图片 |
| 更换主题色 | 修改 css/style.css 中 body 的 background: #c72325 红色值 |
| 增删页面 | 复制整页为模板改名，按活动主题调整文案与素材 |
适用场景
金融 / 理财 APP 推广抽奖页、电商大促转盘活动、节日营销活动页（年会抽奖、周年庆）、注册领奖活动页、品牌推广互动页，任何需要”转盘 + 倒计时 + 中奖滚动”组合的 PC 端营销场景。
从零自研 vs 使用本模板
| 维度 | 从零自研 | 使用本模板 |
|---|---|---|
| 交付周期 | 3~5 天（含动效调试） | 半天配置奖品上线 |
| 页面还原度 | 依赖设计稿 | 成熟抽奖版式开箱即用 |
| 交互与动画 | 旋转缓动需反复调优 | awardRotate 转盘动效已调通 |
| 营销组件 | 弹窗 / 倒计时需自研 | 弹窗领奖 / 倒计时 / 滚动墙全内置 |
| 维护成本 | 自行承担 | 奖品配置集中一处，改表即可迭代 |
在线预览
将项目目录部署至任意静态托管（GitHub Pages、Vercel、宝塔站点等），访问 index.html 即可在线体验转盘抽奖。
http://8.166.93.126:8989/blbtgcj
评论0