大转盘的开发最重要的素材是转盘图片和指针图片，如图24-20所示。
图24-20 转盘和指针
接着需要实现页面布局，其中图片素材需要将转盘设置为前景，指针设置为背景，依此定义外部、内部两个容器。HTML代码如下。
1 <p >
2 <p>
3 <p><img src="img/activity-lottery-24.png"></p>
4 </p>
5 <p>
6 <p><img src="img/activity-lottery-2.png"></p>
7 </p>
8 </p>
相应的CSS控制代码如下。
1 #outer-cont {
2 position: relative;
3 width: 100%;
4 top: 20px;
5 margin-bottom: 30px;
6 }
7 #inner-cont {
8 position: absolute;
9 width: 100%;
10 top: 70px;
11 }
12 #outer {
13 height: 227px;
14 margin: 0 auto;
15 max-width: 227px;
16 width: 227px;
17 }
18 #inner {
19 cursor: pointer;
20 height: 110px;
21 margin: 0 auto;
22 max-width: 90px;
23 width: 90px;
24 }
25 #outer img, #inner img {
26 display: block;
27 margin: 0 auto;
28 }
再定义一些要显示的内容区域，主要有中奖结果区、奖项设置区、活动说明区。其相关代码如下。
1 <p >
2 <p >
3 <p>
4 <p><span>恭喜中奖</span></p>
5 <p>
6 <p>您中了 <span ></span></p>
7 <p>奖品为 <span></span></p>
8 </p>
9 </p>
10 </p>
11 <p>
12 <p>
13 <p><span>奖项设置：</span></p>
14 <p>
15 <p>一等奖：iPhone 6 </p>
16 <p>二等奖：iPhone 5S</p>
17 <p>三等奖：iPhone 5C</p>
18 <p>四等奖：iPad Air </p>
19 <p>五等奖：iPhone 4S</p>
20 <p>六等奖：iPad mini</p>
21 </p>
22 </p>
23 </p>
24 <p>
25 <p>
26 <p>活动说明：</p>
27 <p>
28 <p>本次活动每人可以抽奖5次 </p>
29 <p>祝您中奖！</p>
30 </p>
31 </p>
32 </p>
33 </p>
页面初始时，中奖结果区域通过样式表控制成不可见，抽奖页面的最终实现效果如图24-21所示。
图24-21 大转盘