课堂多媒体点名抽奖系统（3D效果版）

文档说明

文档版本：V1.0

适用对象：课堂教学、活动现场抽奖、大屏互动点名

项目名称：课堂多媒体点名抽奖系统（3D 环形照片轮播版）

核心特效：3D 环形照片轮播（已加宽轮播区域）、3D 翻牌粒子抽奖、横向卡片走马灯

一、系统简介

本系统是一套基于 HTML+CSS + 原生 JavaScript 开发的网页端照片抽奖点名工具，无需后端服务器，直接在浏览器打开即可运行，支持在电脑、大屏投影使用。 主打3D 环形照片轮播抽奖动画，已对环形照片轮播区域进行加宽优化，照片卡片更大、环形展示空间更充足，视觉效果大气震撼；同时内置两套备选抽奖特效，可一键切换。

核心特点：纯前端、离线可用、Excel 批量导入名单 + 照片、支持设置单次抽取人数、可配置是否重复中奖、自动记录抽奖历史。

二、功能清单

✅ 基础抽奖功能

1. Excel 导入名单：读取 Excel 表格，自动加载学生 / 参与者姓名、照片文件名
2. 自定义抽取数量：自由设置一次抽取 1 人或多人
3. 中奖模式切换
   • 可重复中奖：抽取后人员不退出奖池，可多次被抽中
   • 不可重复中奖：抽中的人从奖池移除，不会重复中奖
4. 抽奖启停：点击【开始抽取】启动动画，再次点击停止并展示中奖人员
5. 重置系统：一键清空名单、历史记录，恢复初始状态

✅ 三种抽奖动画特效（一键切换）

1. 3D 环形照片轮播（默认主推，加宽版）
   • 环形 3D 立体旋转，照片卡片环绕成圆环持续转动
   • 已加宽环形容器与照片卡片尺寸，横向展示区域扩大，照片显示更大更舒展
   • 照片卡片自带渐变发光边框，3D 景深效果，适合大屏投影展示
2. 3D 翻牌爆炸粒子特效
   • 多卡片快速翻面滚动，停止时触发金色粒子爆炸动画
3. 大屏横向卡片走马灯
   • 卡片横向持续滚动，走马灯式轮播照片信息

✅ 辅助功能

1. 抽奖历史记录：自动保存每一轮中奖名单，页面实时查看
2. 中奖弹窗展示：抽奖结束后，中央弹出中奖人员照片 + 姓名卡片，带入场动画
3. 图片兜底：照片加载失败自动替换默认占位图，防止空白
4. 响应式适配：兼容大屏，同时在小屏幕自动缩小布局

三、字段规范（Excel 表格格式要求）

Excel 文件需要包含两列表头：

表格

注意事项

1. 照片文件名必须和本地图片名称完全一致（大小写也要匹配）
2. 图片支持 jpg、png 格式
3. 图片路径：网页同目录放置照片，或者填写图片完整 URL 链接（推荐网络图片，本地大屏更省事）
4. 第一行为表头，从第二行开始填写人员信息

四、页面区域介绍

1. 左侧控制面板
   • Excel 文件导入：选择名单表格
   • 抽取人数：设置本轮抽取多少人
   • 当前特效名称：显示正在使用的抽奖动画
   • 中奖模式切换：可重复 / 不可重复
   • 总人数统计：自动统计导入的参与人员总数
   • 抽奖历史记录：查看每一轮中奖名单
   • 操作按钮：开始抽取、重置系统、切换特效
2. 右侧舞台展示区（大屏核心区域）
   • 舞台标题栏
   • 3D 渲染场景（scene-3d）：承载 3D 环形 / 翻牌 / 走马灯动画，本次已加宽环形轮播区域
   • 提示文字：未开始抽奖时提示导入名单
   • 中奖遮罩层：抽奖结束后居中弹出中奖卡片

五、部署与使用教程

环境要求

• 设备：Windows 电脑、多媒体一体机、大屏
• 浏览器：Chrome、Edge（推荐，3D 效果兼容性最好）
• 无需安装软件，无需服务器，本地直接打开 HTML 文件即可运行

使用步骤

1. 将代码保存为 lottery.html
2. 准备好 Excel 名单，填写【姓名】【照片文件名】
3. 准备好照片（本地图片 / 网络图片链接均可）
4. 用浏览器打开 lottery.html

5. 点击导入 Excel，加载参与人员
6. 设置抽取人数、选择中奖模式
7. 选择想要的抽奖特效（默认：加宽版 3D 环形照片轮播）
8. 点击【开始抽取】，动画启动；再次点击【停止抽取】，展示中奖结果
9. 需要重新一轮抽奖，直接再次点击开始；全部完成点【重置系统】清空数据

注意：商用使用请自行处理图片、肖像版权。