1、新建Axure PR文件，取名“Axure制作首頁輪播圖片切換效果”

2、獲取素材，進(jìn)入36Kr官網(wǎng)主頁，獲取輪播圖片素材。

獲取素材

3、拖拽動態(tài)面板控件Dynamic Panel,取名“輪播圖片”，設(shè)置6個狀態(tài)分別取名為1、2、3、4、5、6，動態(tài)面板大小設(shè)置為和圖片大小一致747*231px。

設(shè)置動態(tài)面板

4、雙擊動態(tài)面板1-6每個狀態(tài)，分別將圖片1-6添加到動態(tài)面板狀態(tài)中。

添加狀態(tài)

5、回到Home主頁，在動態(tài)面板“輪播圖片”左右分別添加一個圖片控件Image（從Widgets控件欄拖拽），分別取名left、right，位置、大小根據(jù)需要自由調(diào)整。

加入方向鍵

6、將left、right圖片分別替換成選擇的素材圖片。兩個圖片位置和大小自行調(diào)整。

Image圖片控件替換圖片

7、選中兩個Image控件left、right，單機(jī)右鍵，選擇Set Hidden，設(shè)置隱藏。

設(shè)置隱藏

設(shè)置隱藏后的效果如下

隱藏效果

8、為動態(tài)面板“輪播圖片”設(shè)置自動定時輪播效果。選中動態(tài)面板“輪播圖片”控件，在Page Interactions欄添加OnPageLoad事件，選擇Dynamic Panels——Set Panel State——Set the state選擇Next——勾選Wrap from last to first和Repeat every 2000 ms（設(shè)置每兩秒鐘輪換一張圖片）——選擇Animate In和Animate Out分別為slide left，表示從左滑入和從左滑入，設(shè)置滑入滑出時間默認(rèn)為500ms。

設(shè)置自動輪播
設(shè)置自動輪播

9、添加動態(tài)面板“輪播圖片”鼠標(biāo)事件。鼠標(biāo)移到圖片上時，自動顯示左右兩個方向按鈕。選中動態(tài)面板“輪播圖片”，添加OnMouseEnter事件，選擇Widgets控件欄，選擇Show/Hide，為Left、Right圖片控件設(shè)置顯示效果。

添加鼠標(biāo)事件
添加鼠標(biāo)事件

10、添加動態(tài)面板“輪播圖片”鼠標(biāo)事件。鼠標(biāo)移出圖片時，自動隱藏左右兩個方向按鈕。選中動態(tài)面板“輪播圖片”，添加OnMouseOut事件，選擇Widgets控件欄，選擇Show/Hide，為Left、Right圖片控件設(shè)置隱藏效果。

添加鼠標(biāo)事件
添加鼠標(biāo)事件

11、為Image：Left、Right分別添加事件，點擊Left圖片顯示上一張，點擊Right圖片顯示下一張，選中Left和Right圖片控件，設(shè)置Onclick事件，如下。

Image：Right鼠標(biāo)事件

Left按鈕為顯示上一張，圖片從左向右滑動，Select the state選擇Previous，Animate In 和Animate Out選擇slide right。

Image： Left鼠標(biāo)事件

12、演示效果如下

圖片輪播效果

13、如需演示素材和rp源文件，如下留言獲取。

素材包及rp源文件

如需素材包及rp源文件，請留言聯(lián)系作者獲取。

總結(jié)

以上是生活随笔為你收集整理的[原型设计]Axure制作首页轮播图片切换效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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