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

（圖82）

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

（圖83）

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

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

（圖84）

（圖85）

（圖86）

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

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

（圖87）

（圖88）