Axure 9 教程:Axure 9 實現輪播圖效果

7 評論 22882 瀏覽 25 收藏 3 分鐘

輪播圖在日常的原型設計中是最常見的了,今天和大家分享如何制作自動輪播+手工點擊切換。

思路

  • 面載入時,圖片會自動輪播;
  • 點擊下方對應的圖片,會跳轉到圖標對應的界面;
  • 點擊左右按鈕,既可朝左朝右有順序的翻動界面。

下面正式開始:

1. 所需組件,自己想做啥就做啥,不過有幾個界面就有幾個按鈕,不要多也不要少。

Axure原型教程:axure9實現輪播圖效果

2. 主界面矩形設置為動態(tài)面板,點擊動態(tài)面板添加4個狀態(tài),每種狀態(tài)可由顏色區(qū)分開來,或者做成你所要設置的樣子。

Axure原型教程:axure9實現輪播圖效果

3. 設置完成后,要讓每個圓形圖標對應到我們所設動態(tài)面板的每個狀態(tài),每個圓形對應一個狀態(tài)(1-4圓形都這樣設置)。

Axure原型教程:axure9實現輪播圖效果

Axure原型教程:axure9實現輪播圖效果

4. 設置主界面(動態(tài)面板)載入時進行輪播,這里的轉動時間和交互動畫隨自己的喜好來慢慢調整既可。

Axure原型教程:axure9實現輪播圖效果

5. 設置左右手工翻動輪播圖,點擊“>”,朝右翻動圖片,朝左,同理。

Axure原型教程:axure9實現輪播圖效果

6. 全設置完后,會是這樣

Axure原型教程:axure9實現輪播圖效果

7. 點擊預覽,輪播圖效果就完成啦!

Axure原型教程:axure9實現輪播圖效果

 

作者:妖怪口袋,微信公眾號“妖怪口袋”

本文由 @妖怪口袋 原創(chuàng)發(fā)布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 想請問一下,如果是處于中間的內容,如何制作出從它的左側按鈕點擊會實現“向左側滑動”的進入動畫,而從它的右側按鈕點擊會實現“向右側滑動”的進入動畫呢?如淘寶網的首頁輪播圖

    來自廣東 回復
    1. 類似于動態(tài)面板,左右點擊可以滾動,加條件和面板

      來自廣東 回復
    2. 好的!我自己再試試 謝謝!

      來自廣東 回復
  2. 這里有2020年Axure 9 8 產品經理全集視頻 【藍光1920P】http://163.lu/rXsyh4

    回復
  3. 您好呀~如果想實現非一張圖的單次顯示,而是多行數據在同一個板塊依次輪播顯示,就是動態(tài)面板中有幾行數據,下面還有需要向上滾動的內容,要如何實現?

    來自廣東 回復
  4. 還可以

    來自廣東 回復
    1. 謝謝老板支持

      來自廣東 回復