作為Axure初學(xué)者，把最近學(xué)的東西記錄下來，和大家一起學(xué)習(xí)。不管是在PC端還是移動(dòng)端，輪播圖是常見的設(shè)計(jì)元素。下面詳細(xì)講解輪播圖的制作步驟。

還是先看下效果

自動(dòng)輪播

人工點(diǎn)擊下一張

鼠標(biāo)懸浮停止和移開重新輪播

操作步驟

自動(dòng)輪播的制作

1.選擇Axure中的動(dòng)態(tài)面板，新增3個(gè)狀態(tài)，并從第一個(gè)開始命名 圖1 ...圖4，并為動(dòng)態(tài)面板設(shè)置每個(gè)狀態(tài)對(duì)應(yīng)的圖片，雙擊狀態(tài)進(jìn)入，找到合適的圖片黏貼上去。?

2. 雙擊動(dòng)態(tài)面板對(duì)增加4個(gè)狀態(tài)， 然后雙擊每個(gè)狀態(tài)進(jìn)入之后制作4個(gè)圖片

3.制作完4個(gè)圖片之后，就開始了輪播的第一步

首先是進(jìn)入這個(gè)頁面加載的時(shí)候要自動(dòng)輪播，在動(dòng)態(tài)面板中添加載入事件 如圖，設(shè)置Next，選擇向后循環(huán)和每個(gè)圖片的之間間隔的時(shí)間，再加上圖片移入和移出的效果。

人工操作輪播

1. 添加左右的箭頭，為了增加操作的區(qū)域，可以在箭頭的地方增加一個(gè)大一點(diǎn)的熱區(qū)，添加熱區(qū)的事件 -鼠標(biāo)單擊 當(dāng)鼠標(biāo)點(diǎn)擊之后圖片切換到后一張，同時(shí)切換切換之后為了后續(xù)圖片還可以接著輪播，還要復(fù)制載入的事件到鼠標(biāo)單擊中。這樣就能單擊之后既能實(shí)現(xiàn)切換下一個(gè)圖片，也不至于讓輪播停止。

鼠標(biāo)懸浮停止和移開鼠標(biāo)繼續(xù)輪播

1. 為了使鼠標(biāo)能在懸浮到圖片上能停止輪播和鼠標(biāo)移開移開之后能繼續(xù)輪播。增加了鼠標(biāo)停放事件和鼠標(biāo)移出的事件

2.鼠標(biāo)移開之后增加圖片輪播，和載入事件的內(nèi)容一致，可以直接復(fù)制過來。

輪播過程小圓點(diǎn)選中效果

1. 增加4個(gè)小圓點(diǎn)，設(shè)置-交互樣式-選中-填充顏色 設(shè)置一個(gè)背景色。為了實(shí)現(xiàn)同一時(shí)間只能有一個(gè)小圓點(diǎn)為選中狀態(tài)，增加 設(shè)置選項(xiàng)組（名稱隨便就好）

2. 然后在設(shè)置動(dòng)態(tài)面板每個(gè)狀態(tài)觸發(fā)小圓點(diǎn)的選中狀態(tài)。添加 狀態(tài)改變時(shí)的事件，添加case1，即當(dāng)播放第一個(gè)圖片時(shí)把第1個(gè)小圓點(diǎn)作為選中狀態(tài)。然后復(fù)制這個(gè)時(shí)間到另外3個(gè)Case。調(diào)整每個(gè)case對(duì)應(yīng)的圖片和圓點(diǎn)。

狀態(tài)改變事件

設(shè)置條件

當(dāng)條件滿足時(shí)觸發(fā)選中

2. 同時(shí)別忘記，在網(wǎng)頁加載時(shí)展示第一個(gè)圖片把第一個(gè)小圓點(diǎn)選中。

總結(jié)

動(dòng)態(tài)面板可以看成網(wǎng)頁的層次，設(shè)置不同的事件觸發(fā)不同的層次的事件。不僅僅用在圖片輪播上，還有其他的更多的應(yīng)用場(chǎng)景，本篇只介紹了輪播的制作，后續(xù)增加其他的應(yīng)用。