大轉盤的開發最重要的素材是轉盤圖片和指針圖片，如圖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 大轉盤