首先準備好三張廣告圖像，見圖82。

（圖82）

第一步：在【部件】面板中拖放一個圖像部件到設計區(qū)域，雙擊該部件導入廣告圖 1，并將其尺寸設置為400×300像素，然后右鍵單擊該圖像部件，在彈出的關聯(lián)菜單中選擇【轉(zhuǎn)換為動態(tài)面板】，見圖83。

（圖83）

第二步：在右側(cè)的部件【屬性】面板中，給動態(tài)面板部件命名為【輪播廣告】，在學習過程中要養(yǎng)成給部件命名的好習慣。然后雙擊動態(tài)面板，在彈出的【動態(tài)面板狀態(tài)管理】對話框中，單擊【State1】，然后單擊【快速復制】圖標，快速復制兩份動態(tài)面板狀態(tài)【Stete2】和【State3】（注意：使用快速復制功能會同時復制【State1】中的內(nèi)容，也就是那張廣告圖1），見圖84，單擊【確定】按鈕關閉【動態(tài)面板狀態(tài)管理】。

第三步：在右側(cè)的【Outline】概要面板中，可以看到輪播廣告這個動態(tài)面板中的三個不同的狀態(tài)以及其中的內(nèi)容，見圖85。現(xiàn)在三個狀態(tài)中的內(nèi)容都是一樣的，分別雙擊【State2】然后再次雙擊【State2】中的圖像替換成廣告圖2，同樣的方法替換廣告圖3，替換后見圖86。

（圖84）

（圖85）

（圖86）

第四步：通常網(wǎng)站建設小編認為我們見到的圖像輪播廣告都是在打開頁面后等待幾秒鐘開始輪播的，所以這里我們使用【頁面載入時】事件來實現(xiàn)（你也可以使用動態(tài)面板部件的【載入時】事件來實現(xiàn)。隨著學習的深入你會發(fā)現(xiàn)，很多效果的實現(xiàn)方法都不止一種）?，F(xiàn)在回到Index頁面并單擊頁面空白處，在右側(cè)的【頁面屬性】面板中雙擊【頁面載入時】事件，見圖87，然后在彈出的【用例編輯器】窗口頂部給用例命名為【圖像輪播】，在左側(cè)的動作列表中新增【設置面板狀態(tài)】動作，在右側(cè)的配置面板中勾選【輪播廣告】動態(tài)面板，并設置【選擇狀態(tài)】為【下一個】。勾選【向前循環(huán)】，勾選【循環(huán)間隔】并設置間隔時間為【3000】毫秒，勾選【第一個狀態(tài)延遲 3000毫秒】（這個選項的意思是，當頁面打開時等待3秒鐘之后再開始輪播）。設置【進入/退出動畫】為【淡入淡出】效果，動畫時間為【500】毫秒，見圖88，單擊【確定】按鈕關閉【用例編輯器】。

第五步：在頂部的工具欄中單擊【預覽】按鈕，或者按下快捷鍵F5/Shift+Command+P，快速預覽交互效果。

（圖87）

（圖88）