Axure中不乏許多的高級(jí)功能，其中輪播圖是我們?cè)陧?yè)面中常見(jiàn)的一個(gè)高級(jí)功能，輪播圖的做法有很多種，但是就我個(gè)人而言認(rèn)為使用動(dòng)態(tài)面板做輪播簡(jiǎn)單點(diǎn)。今天就讓我們來(lái)學(xué)習(xí)一下Axure中動(dòng)態(tài)面板實(shí)現(xiàn)輪播圖吧。

一、基礎(chǔ)用法

1.首先老規(guī)矩我們從元件庫(kù)中拖拽元件進(jìn)入我們的設(shè)計(jì)區(qū)域，今天我們使用的是動(dòng)態(tài)面板。

2.我們雙擊動(dòng)態(tài)面板進(jìn)入編輯狀態(tài)。

3.我們點(diǎn)擊頂部的狀態(tài)區(qū)，并添加我們的狀態(tài)。（這里我添加了四個(gè)，并雙擊命名為img1234）

4.設(shè)置后之后，我們?cè)侔褕D片元件拉入動(dòng)態(tài)面板里，每個(gè)狀態(tài)放不同你需要的圖片，并調(diào)整大小。這里要注意不要推出編輯面板哦。設(shè)置好后我們就可以點(diǎn)擊關(guān)閉退出編輯面板了。

5.我們?cè)趯⑾潞玫淖笥曳?yè)圖標(biāo)拖拽進(jìn)來(lái)。你也可以選擇你喜歡的圖標(biāo)拖拽進(jìn)來(lái)。

6.大概樣式設(shè)置好后，我們就可以做交互事件了。首先我們選中我們的動(dòng)態(tài)面板。找到新建交互。

7.找到動(dòng)態(tài)面板中的狀態(tài)改變時(shí)。

8.然后鼠標(biāo)點(diǎn)出來(lái)，再將鼠標(biāo)移到狀態(tài)改變時(shí)那一行，找到右邊的啟用情形。

9.這時(shí)候來(lái)到我們的情形編輯。選擇添加情形。

?

10.這里添加的狀態(tài)意思是如果當(dāng)前的面板狀態(tài)==img1，然后確定。

?11.后面我們就繼續(xù)添加情形。重復(fù)操作。每個(gè)情形對(duì)應(yīng)每個(gè)狀態(tài)圖片哦。

?

12.接下來(lái)我們給翻頁(yè)圖標(biāo)增加交互事件。

13.右邊的圖標(biāo)也一樣。

14.接下來(lái)我們?nèi)ヮA(yù)覽看看吧。

?點(diǎn)擊左右反轉(zhuǎn)圖標(biāo)是可以使得輪播圖切換的。

二、豐富化。

我們一般看到的輪播圖1.進(jìn)入頁(yè)面自動(dòng)播放；2.會(huì)在輪播圖下面有小圓點(diǎn)，隨著圖片的切換，小圓點(diǎn)也切換起來(lái)；3.鼠標(biāo)移入到輪播圖圖片時(shí)暫停播放，移出時(shí)恢復(fù)播放。接下來(lái)我們實(shí)現(xiàn)這兩個(gè)功能。

（一）進(jìn)入頁(yè)面自動(dòng)播放。

1.我們將鼠標(biāo)點(diǎn)擊頁(yè)面，也就是動(dòng)態(tài)面板外。然后新建交互事件。找到頁(yè)面載入時(shí)。

2.找到元件動(dòng)作里的設(shè)置面板狀態(tài)。

3.再分別設(shè)置目標(biāo)-STATE，勾選向后循環(huán)，進(jìn)入動(dòng)畫，點(diǎn)擊更多選項(xiàng)，循環(huán)間隔勾上。

4.我們預(yù)覽可以看到我們的輪播圖在我們進(jìn)入頁(yè)面的時(shí)候就會(huì)自動(dòng)播放拉。

（二）在輪播圖下面添加小圓點(diǎn)，隨著圖片的切換，小圓點(diǎn)也切換起來(lái)，同時(shí)點(diǎn)擊圓點(diǎn)也可以跳轉(zhuǎn)圖片。

1.我們選擇圓形元件（或者你可以選擇你自己喜歡的圖標(biāo)、元件），復(fù)制多份。有多少個(gè)狀態(tài)（也就是我們有多少圖片），你有幾個(gè)圖片就對(duì)應(yīng)多少個(gè)圖片嘛，或者你也可以選擇四個(gè)圓點(diǎn)，無(wú)論多少圖片，都循環(huán)回來(lái)。這里我們選擇四個(gè)圓點(diǎn)對(duì)應(yīng)四個(gè)圖片比較清晰。

2.這里教大家一個(gè)小技巧，就是如何讓你需要的元件水平等距并排。

我們同時(shí)選中我們需要的元件，點(diǎn)擊菜單中的水平即可。

3.我們要給我們的圓形給個(gè)名字，方便我們查找到。建議大家有這個(gè)良好的習(xí)慣，其他元件都設(shè)置好各自的名字，特別是很多重復(fù)的元件時(shí)，更加需要設(shè)置，不然你分不清你的元件，這樣就比較頭疼了。

4.這里我們需要給圓點(diǎn)設(shè)置互斥，同時(shí)選中全部圓點(diǎn)，設(shè)置選項(xiàng)組。起個(gè)名字。

5.我們先設(shè)置點(diǎn)擊圓點(diǎn)跳轉(zhuǎn)圖片的交互。新建交互，單擊時(shí)，設(shè)置面板狀態(tài)

6.State選擇你要跳轉(zhuǎn)的圖片，我們第一個(gè)圓點(diǎn)就是第一個(gè)圖片嘛。其他圓點(diǎn)就是其他圖片。剩下三個(gè)圓點(diǎn)同樣操作。

7.接下來(lái)我們實(shí)現(xiàn)切換圖片就切換圓點(diǎn)的功能。

點(diǎn)擊我們的動(dòng)態(tài)面板。給上面設(shè)置好的情形添加動(dòng)作。情形下面的 + 號(hào)即是添加動(dòng)作。

9.選擇“設(shè)置選中”

10.選擇元件，這時(shí)候我們給元件設(shè)置名字的好處了，方便我們快速選擇我們的元件，不會(huì)選錯(cuò)元件。

11.給圓點(diǎn)元件設(shè)置“真”值，這里的意思是當(dāng)我們選中到圓點(diǎn)的時(shí)候令他為真值。

12.其他情形同樣操作。如圖所示即可。

13.然后我們給圓點(diǎn)設(shè)置交互樣式，右鍵選中我們的圓點(diǎn)，選擇交互樣式。

14.在交互樣式里，我們選擇“選中”——“填充顏色”。其他圓點(diǎn)同操作。選擇你喜歡的樣式顏色。

15.進(jìn)入頁(yè)面查看我們的輪播圖與小圓點(diǎn)的功能都實(shí)現(xiàn)了，但是細(xì)心的小伙伴會(huì)發(fā)現(xiàn)還有一個(gè)問(wèn)題：進(jìn)入頁(yè)面時(shí)第一個(gè)圖片的第一個(gè)圓點(diǎn)沒(méi)有選中。

這時(shí)候我們只需要給第一個(gè)圓點(diǎn)右鍵選中即可。

16.我們看看效果吧。

?（三）鼠標(biāo)移入到輪播圖圖片時(shí)暫停播放，移出時(shí)恢復(fù)播放。

1.選中動(dòng)態(tài)面板，新建交互。移入鼠標(biāo)時(shí)。

2.設(shè)置面板狀態(tài)

3.在STATE中選擇停止播放。.

4.同樣鼠標(biāo)移除時(shí)，我們?cè)俳o它設(shè)置自動(dòng)播放就好了。

5.我們看看效果吧。鼠標(biāo)移入輪播圖就會(huì)暫停播放。 移出又會(huì)繼續(xù)播放。

總結(jié)：

? 我們使用動(dòng)態(tài)面板實(shí)現(xiàn)輪播圖的基本功能都實(shí)現(xiàn)了。輪播圖作為網(wǎng)頁(yè)一個(gè)重要的元素，但是不難，需要我們理清思路。大家都需要熟悉掌握哦！輪播圖的使用有助于我們可以熟悉的運(yùn)用交互事件。輪播圖實(shí)現(xiàn)了，那么Axure中的其他功能也不在話下了。加油！

總結(jié)

以上是生活随笔為你收集整理的Axure动态面板实现轮播图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。