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

2、獲取素材，進入36Kr官網主頁，獲取輪播圖片素材。

獲取素材

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

設置動態面板

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

添加狀態

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

加入方向鍵

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

Image圖片控件替換圖片

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

設置隱藏

設置隱藏后的效果如下

隱藏效果

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

設置自動輪播
設置自動輪播

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

添加鼠標事件
添加鼠標事件

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

添加鼠標事件
添加鼠標事件

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

Image：Right鼠標事件

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

Image： Left鼠標事件

12、演示效果如下

圖片輪播效果

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

素材包及rp源文件

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。