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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

注意事項：

1、教程中動態(tài)面板區(qū)域的尺寸為：500px*200px

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

3、點擊按鈕時圖片會自動跳到對應(yīng)頁面，在2000毫秒后，會繼續(xù)循環(huán)輪播下去

相關(guān)推薦：

Axure繪制好的原型怎么發(fā)布和預(yù)覽?

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

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

最新評論