年会、发布会，大屏上要抽出几位观众。头像在中间框里跳，停住的那张进右侧名单。点「开始」滚动，再点一次按设定人数连抽，抽过的人从池子里拿掉。入口是 index.html。样式在 css/lottery.css，名单和抽取在 js/lottery.js。脚本先引 jQuery，再引 lottery.js。jQuery 掉到后面，$ 会挂。
头像抽奖用到哪些文件
html 里按这个顺序引：
页面就这三块：.luck-back 铺满窗口，中间 .slotMachine 是头像框，右侧 .luck-user-list 是中奖名单。维护的时候把入口指到 index.html 就行。
页面骨架
#start 用 padding: 10px 32px 撑开，加上 cursor: pointer。
抽奖页如何布局
.luck-back 绝对铺满，背景图 img/back.jpg，background-size: cover。中间 .luck-content 上下左右各留 20%，半透明黑底。右侧名单要占 240 像素，内容区 padding-right: 260px 把中间头像框往左让开。
头像框 .slotMachine 200×200，金边。头像写在 .slot 的 background-image 上，底下 .name 叠姓名。名单 .luck-user 绝对钉在内容区右边，ul 超出就滚动。
背景图路径相对 css 文件，写成 ../img/back.jpg，不要相对 html。
名单如何滚动抽取
名单放在 people 数组里，每项一个 img、一个 name。本例 12 个人、一次抽 5 个，方便立刻抽完一轮；业务里人数和 drawCount 按活动改。
点 #start：还没滚就 startSpin，钮上改成「停止」；已经在滚就进入自动抽，钮上改成「自动抽取中(剩余人数)」。自动抽进行中再点，直接 return，狂点也没用。
滚动用 setTimeout 递归：每次从还在池子里的人里 Math.random() 出一个下标，把头像和姓名写到框上，再约下一次。本例 delay 写成 80 毫秒方便看见在跳，再小会闪成一片。spinTimer 存的是 setTimeout 返回的计时器 ID，必须留着，否则 stopSpin 里 clearTimeout 找不到它、停不掉。
点「停止」后并不立刻定人。先继续滚 autoGap 毫秒（本例 1000），再 pickOne。这样大屏上还能看一跳，不会一点就定死。人不够 drawCount 个就不开抽。事件挂在 body 上委托。
我第一次看也卡了一下：滚动和连抽是两套计时器。spinTimer 管头像跳，autoTimer 管隔多久定一个人。混成一个变量，连抽时会把滚动那次 setTimeout 盖掉，框就停住不动了。这坑我见过不止一次。
中奖结果怎么显示到页面上
pickOne 先停滚动，拿当前框上的那个人 people[current]，拼一条 li 插到 .luck-user-list 最上面。头像走 .portrait 的背景图，名字走 .luckuserName。
插完立刻 people.splice(current, 1)，从池子里拿掉。不拿掉，下一轮 Math.random() 还能抽到同一个人。下标删完如果已经越界，把 current 归零，避免下一帧读空。
还没抽满 drawCount 人，就再 startSpin，隔 autoGap 再定下一位。抽满了 finishAuto，钮改回「开始」。说白了：滚一会儿、停、写名单、再滚，连做五次。
如何对接到真实项目中
名单不要写死。接口返回头像地址和姓名，填进 people。jQuery 这套建议用 Layui 做提示，具体按实际项目来定。人不够、接口失败走 layer.msg，不要 alert。
/api/lottery/users 的路径和字段换成项目约定。下面这份覆盖 lottery.js，页面结构仍用前面的 html。
接口每项带 img、name。没有接口就把 people 写成项目里的头像路径和姓名。一次抽几个改 drawCount；滚动快慢改 delay，连抽间隔改 autoGap。