起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure教程：廣告圖片自動輪播+點擊切換
廣告圖輪播在日常的原型設計中是最常見的了，今天和大家分享如何制作自動輪播+手工點擊切換，底部有已制作好的原型文件下載，廢話不多說，咋們現在就動手實現。
首先看一下我們最終想要的效果：
一、制作自動輪播
1、選中圖片右鍵轉換為動態面板，同時在動態面板中添加第二張和第三張廣告圖。
如下圖：
2、點擊頁面空白處，設置頁面載入時事件，選擇 設置動態面板 效果，選擇banner圖片動態面板，把狀態設置為 Next , 勾選 向后循環 和 循環間隔 ，同時設置好進入動畫和退出動畫向左滑動。
如下圖：
3、重復以上兩步操作把焦點圖完成，其中注意兩點，一是進入動畫和退出動畫設置為 逐漸，二是每一幀設置好對應的焦點樣式。
到這里可以預覽一下效果，會發現簡單兩步，我們就實現了廣告圖輪播了，嘻嘻。
接下來我們進入第二大步，增加點擊切換功能。
二、增加點擊切換
給每一幀的焦點樣式增加鼠標單機時事件，點擊時觸發2個事件：
（1）設置切換面板狀態，需同時設置好?焦點樣式?和?banner圖片?對應的面板狀態。
例如：選擇第一幀的元素，則設置?焦點樣式?和?banner圖片 的面板狀態切換到第一幀和第一張，以此類推，把第二幀和第三幀設置好。
（2）設置單擊后自動輪播，需同時設置好?焦點樣式?和?banner圖片?對應的面板狀態自動輪。
方法和第一步基本雷同，例如選擇第一幀的元素，則設置?焦點樣式?和?banner圖片 的面板狀態設置為Next，向后循環，設置項如下圖：
用此方法重復把每一幀的焦點樣式制作好，我們的banner圖自動輪播+點擊切換輪播，就完成了，是不是很簡單。
原型下載地址：https://www.xiangtianchi.com/web/OpusDetail?id=47
本文由 @熠辰 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自 Pexels，基于 CC0 協議
我看演示效果的焦點圖和圖片無法同步動，慢了
說點什么好呢
我是小白 請問page1里面做了banner圖片和焦點樣式 page1里面不會顯示兩個圖片嗎？不明白這個焦點樣式怎么來的？
焦點圖是什么意思，怎么重復又兩個動態面板
圖片上面的焦點樣式，其中的 第一幀、第二幀、第三幀。
axure8, 找了好久還是沒搞明白焦點圖是什么意思，第一幀、第二幀、第三幀也沒有找到
“第一幀”是動態面板里面面板的命名，是可以自己修改的，動態面板默認是“state1”。。。
焦點圖是另一個動態面板的名稱，第一幀，第二幀，第三幀是3個不同的狀態，這是自己畫的。
我是小白 請問page1里面做了banner圖片和焦點樣式 page1里面不會顯示兩個圖片嗎？不明白這個焦點樣式怎么出來的
焦點圖就是分頁符，banner輪播預覽下面的三個小橫條 我真的不太想吐槽，我還以為作者有什么新的方法制作輪播圖，原來還是兩個動態面板實現