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

快速產(chǎn)品原型設(shè)計(jì)工具 Axure RP Pro v7.0.0.3174 漢化綠色版

• 類型：應(yīng)用其它
• 大小：8.97MB
• 語(yǔ)言：簡(jiǎn)體中文
• 時(shí)間：2014-12-22

查看詳情

1、新建輪播區(qū)域：

從元件庫(kù)（也稱為部件庫(kù)）中拖"動(dòng)態(tài)面板"元件到編輯區(qū)，設(shè)寬度為500px，高度為200px，如下圖：

2、添加面板狀態(tài)：

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

3、編輯輪播面板：

在“動(dòng)態(tài)面板狀態(tài)管理”彈出框中，點(diǎn)擊按鈕編輯新添加的3張狀態(tài)面板（按鈕見(jiàn)附圖，紅框已標(biāo)出），如下圖：

4、添加輪播圖片：

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

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

5、添加控制按鈕：

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

6、設(shè)置輪播效果：

這一步是核心的步驟，請(qǐng)你按以下圖文描述一步步操作；

1）鼠標(biāo)雙擊站點(diǎn)地圖根目錄（即圖中home頁(yè)面），會(huì)打開(kāi)home頁(yè)編輯窗口；

2）鼠標(biāo)點(diǎn)選“動(dòng)態(tài)面板”區(qū)域，在Axure軟件界面右邊“部件交互與注釋”窗口，點(diǎn)擊“載入時(shí)”會(huì)彈出名為“用例編輯器”的對(duì)話窗口；

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

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

7、設(shè)置按鈕控制效果：

實(shí)現(xiàn)輪播圖片效果后，讓我們?cè)俳釉賲枌粹o控制效果也加上，操作步驟如下：

1）在“第1張輪播圖”的標(biāo)簽頁(yè)里開(kāi)始編輯，鼠標(biāo)點(diǎn)擊“按鈕1”，在“部件交互與注釋”窗口，鼠標(biāo)雙擊“鼠標(biāo)單擊時(shí)”狀態(tài)選項(xiàng)，會(huì)彈出名為“用例編輯器”的對(duì)話框；

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

3）在“點(diǎn)擊新增動(dòng)作”區(qū)域鼠標(biāo)單點(diǎn)“等待”，在“配置動(dòng)作”操作界面，將等待時(shí)間設(shè)為2000毫秒；

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

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

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

注意事項(xiàng)：

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

2、教程中準(zhǔn)備的輪播圖片尺寸為：500px*200px。

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

相關(guān)推薦：

axure7.0怎么制作折疊和展開(kāi)的菜單效果?

Axure怎么制作頁(yè)面滾動(dòng)時(shí)菜單固定在頂部的頁(yè)面？

最新評(píng)論