使用axure動態(tài)面板制作輪播圖效果

  輪播圖是網(wǎng)站、移動app首頁中經(jīng)常用到的視覺交互形式，本文中我們使用axure制作一個動態(tài)輪播圖的案例。

達(dá)到的效果描述如下：

    1.頁面加載時自動向后輪播；

    2.點擊[1]處向前切換圖片，切換后再次自動向后輪播；

    3.點擊[2]處向后切換圖片，切換后繼續(xù)自動向后輪播。

步驟：

1.  在設(shè)計區(qū)域中拖入一個圖片元件，調(diào)整大小，雙擊導(dǎo)入圖片；

2.  右鍵圖片->轉(zhuǎn)換為動態(tài)面板，并命名為p_w_picpaths，如下圖：

3. 雙擊p_w_picpaths，在面板狀態(tài)管理器中，復(fù)制state1三次，最終達(dá)到4個狀態(tài)，如下圖：

4.在圖層面板中雙擊進入四個狀態(tài)編輯區(qū)域，修改剩余三張圖片樣式，如下圖；

5.在自帶的Icons元件庫中，拖入左右兩個箭頭到p_w_picpaths上方，調(diào)整大??；

6.在頁面中，雙擊“頁面載入時”，在用例編輯器中，設(shè)置面板狀態(tài)p_w_picpaths為next，勾選向后循環(huán)、循環(huán)間隔、首個狀態(tài)延時復(fù)選框，間隔的時間可以自己設(shè)置，一般3000毫秒比較好，我為了省事直接默認(rèn)了~進入推出動畫都選擇向左滑動，如下圖

7.選中左箭頭，雙擊“鼠標(biāo)單擊時”，在用例編輯器中，設(shè)置面板狀態(tài)p_w_picpaths為previous，勾選向前循環(huán)（無需勾選循環(huán)間隔，因為不需要自動向前輪播），動畫都選擇向右滑動；在點擊左箭頭想前切換圖片后，如果不繼續(xù)點擊，則還應(yīng)該繼續(xù)向后輪播，則繼續(xù)添加動作，切換p_w_picpaths狀態(tài)（和頁面加載時相同），如下圖：

8.右箭頭同理，鼠標(biāo)單擊時向后切換，之后繼續(xù)添加自動向后輪播的動作即可。

以上就是一個基本的輪播圖效果，但是在實際的網(wǎng)站或app中，輪播圖的下方或角落里都會有一個當(dāng)前狀態(tài)的顯示，如下圖：

這個狀態(tài)指示器如何制作呢？大家可以思考一下。

給點提示，狀態(tài)指示器其實也是一個動態(tài)面板的四個不同狀態(tài)，大家可以嘗試一下讓圖片和指示器兩個動態(tài)面板同時切換狀態(tài)，大體思路就是這樣的，但是這里邊可能會出現(xiàn)一些問題，如果大家有興趣可以學(xué)習(xí)我的51cto學(xué)院中的axure實戰(zhàn)課程，地址如下：http://edu.51cto.com/course/course_id-8008.html