當下幾乎所有大小網站都有輪播圖展示功能，你還可以用鼠標點擊輪播圖上的按鈕來切換圖片；當你需要制作帶按鈕控制的輪播圖效果時，往往會上網搜索制作方法，但很難找到詳細步驟說明和演示，本人也經歷過欲找教程但屢次無果的痛苦，因此在這里跟大家詳細描述每個實現步驟，力求讓每位小白無須動腦袋、無條件看完就會。

1、新建輪播區域：從元件庫（也稱為部件庫）中拖"動態面板"元件到編輯區，設寬度為500px，高度為200px，如下圖：

2、添加面板狀態：鼠標右鍵點擊“動態面板”，在彈出菜單中選擇“管理面板狀態”，給動態面板命名，并添加3個面板狀態，分別為“第1張輪播圖”、“第2張輪播圖”、“第3張輪播圖”，如下圖：

3、編輯輪播面板：在“動態面板狀態管理”彈出框中，點擊按鈕編輯新添加的3張狀態面板（按鈕見附圖，紅框已標出），如下圖：

4、添加輪播圖片：在“第1張輪播圖”的標簽頁里開始編輯，首先元件庫（也稱為部件庫）里將“圖片”元件拖至編輯窗口內，并將位置和大小設置為0，將寬度和高度分別設置為500px、200px；鼠標雙擊已設置好的“圖片”元件，會彈出對話框讓你從電腦中選擇圖片，從而完成添加第1張輪播圖；

依次在“第2、3張輪播圖”標簽頁編輯中采用相同的操作，依次拖入“圖片”元件并完成相同參數設置，依次添加完第2張輪播圖，第3張輪播圖。教程中采用的輪播圖分別為：windows XP、Windows 7、Windows8的經典桌面圖片；如處圖所示：

5、添加控制按鈕：在“第1張輪播圖”的標簽頁里開始添加控制按鈕（從元件庫中拖3個“矩形”元件制作成按鈕即可），并對當前輪播圖按鈕進行突出顯示；添加成功后，依次在第2、3張輪播圖標簽頁編輯操作；如下圖所示：

6、設置輪播效果：這一步是核心的步驟，請你按以下圖文描述一步步操作；

1）鼠標雙擊站點地圖根目錄（即圖中home頁面），會打開home頁編輯窗口；

2）鼠標點選“動態面板”區域，在Axure軟件界面右邊“部件交互與注釋”窗口，點擊“載入時”會彈出名為“用例編輯器”的對話窗口；

3）鼠標單點“設置面板狀態”，在“配置動作”操作界面，選擇狀態為"Next"，勾選“從最后一個到第一個循環”，勾選循環間隔狀態，并將間隔時間設置為2000毫秒；并點擊確保保存；如下圖所示：

回到home頁面編輯窗口后，你在菜單欄中，依次點擊“發布”、“預覽”，就會在瀏覽器中看到你設置的輪播圖片，每2000毫秒循環輪播到下一張圖片；

7、設置按鈕控制效果：實現輪播圖片效果后，讓我們再接再厲將按鈕控制效果也加上，操作步驟如下：

1）在“第1張輪播圖”的標簽頁里開始編輯，鼠標點擊“按鈕1”，在“部件交互與注釋”窗口，鼠標雙擊“鼠標單擊時”狀態選項，會彈出名為“用例編輯器”的對話框；

2）在“點擊新增動作”區域鼠標單點“設置面板狀態”，在“配置動作”操作界面，選擇狀態為我們此前命名的"第1張輪播圖"；

3）在“點擊新增動作”區域鼠標單點“等待”，在“配置動作”操作界面，將等待時間設為2000毫秒；

4）在“點擊新增動作”區域鼠標單點“設置面板狀態”，在“配置動作”操作界面，選擇狀態為"Next"，勾選“從最后一個到第一個循環”，勾選循環間隔狀態，并將間隔時間設置為2000毫秒；并點擊確保保存；

就此，你完成了在“第1張輪播圖”標簽頁第1個按鈕的操作設置，然后以同樣的方法針對第2、3個按鈕進行類似設置，有一點不同時，在2、3按鈕的“配置動作”設置中，選擇狀態分別為對應的"第2張輪播圖"、"第3張輪播圖"；

完成上述操作后，再分別打開“第2、3張輪播圖”標簽頁對其中的3個按鈕分別進行相同的操作設置；如下圖所示：

注意事項：

1、教程中動態面板區域的尺寸為：500px*200px

2、教程中準備的輪播圖片尺寸為：500px*200px

3、點擊按鈕時圖片會自動跳到對應頁面，在2000毫秒后，會繼續循環輪播下去

相關推薦：

Axure繪制好的原型怎么發布和預覽?

Axure怎么制作頁面滾動時菜單固定在頂部的頁面？

axure怎么做滑動效果? axure做手機觸摸屏幕滑動效果的方法