大转盘的开发最重要的素材是转盘图片和指针图片，如图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 大转盘