怎麼用Axure實現輪播圖效果?

axure是一個非常實用的原型製作工具,產品經理、產品助理、互動設計師經常用到它,那怎麼使用axure實現廣告輪播圖效果呢?

怎麼用Axure實現輪播圖效果

工具/原料

Axure7

方法/步驟

建立兩個動態面板,一個用於輪播圖片,命名為【背景圖片】,一個用於圖片中的小圓點,命名為【圓點】

怎麼用Axure實現輪播圖效果

怎麼用Axure實現輪播圖效果

然後再對應的【背景圖片】動態圖中新增3個動態,並每個動態設定對應新增圖片,本文以佔位符代替

怎麼用Axure實現輪播圖效果

然後設定【圓點】動態圖中新增三種圓點動態,效果見下圖

怎麼用Axure實現輪播圖效果

怎麼用Axure實現輪播圖效果

怎麼用Axure實現輪播圖效果

這一步最關鍵,對動態面板設定【載入時】動作,先設定等待3000毫秒,再設定面板狀態【背景圖片】 下一步 ->從最後一個到第一個自動跳轉 ->重複每個3000毫秒切換->進入動畫向左滑動用時500毫秒->退出時動畫向左滑動用時500毫秒,再設定面板狀態【圓點】下一步->從最後一個到第一個自動跳轉 ->重複每個3000毫秒切換。點選確定。

怎麼用Axure實現輪播圖效果

怎麼用Axure實現輪播圖效果

怎麼用Axure實現輪播圖效果

好了,到此為止最簡單的axure廣告輪播圖效果到此為止,快點選F5預覽下效果吧

注意事項

動作設定為載入時

需要設定等待動作,不然一載入的時候就會切換到第二張圖片的

廣告, 效果, 工具, 產品, 輪播圖,
相關問題答案