Axure RP8 動態(tài)面板之輪播圖設置

7 評論 52041 瀏覽 80 收藏 6 分鐘

爬行蟑螂也是剛開始使用Axure,自學的,不過Axure真心很強大,會一點一點的分享一些操作功能;最簡單的操作步驟,這里分享動態(tài)面板之輪播圖設置。

第一步:拖入動態(tài)面板,并命名為【輪播圖測試】,給動態(tài)面板添加三種狀態(tài),分別命名為【banner1】、【banner2】、【banner3】;

第二步:雙擊動態(tài)面板,進入動態(tài)面板【banner1】編輯頁面;如圖,進入動態(tài)面板【banner2】【banner3】編輯頁面也是如此,分別給三個動態(tài)面板拖入矩形框,分別給三個動態(tài)面板里面的矩形框填充不同的顏色(這里添加了文字以便對應),以示區(qū)分;如圖效果;

第三步:添加輪播小按鈕;分別在三個輪播圖里面添加小按鈕,并分別填充紅色以示選中;如圖所示

第四步:實現自動輪播;點擊【輪播圖測試】頁面;選中動態(tài)面板;右邊添加事件編輯欄——屬性——載入時——添加動作,如下圖,選擇 【設置面板狀態(tài)】——勾選【輪播測試圖】動態(tài)面板——選擇狀態(tài)【Next】——勾選【向后循環(huán)】——循環(huán)時間及進入動畫可以自行設置,然后確定提交即可;預覽,基本的輪播循環(huán)就實現了;

第五步:設置【按鈕控制效果】,進入動態(tài)面板【banner1】編輯頁面;

1.選中【按鈕1】——添加事件【等待】——設置等待時間為【1000】毫秒;

2.選中【按鈕2】——添加事件【設置面板狀態(tài)】——勾選【輪播測試圖】動態(tài)面板——選擇狀態(tài)為對應的【banner2】——進入動畫【向左滑動】時間為【3000】毫秒,退出動畫【向左滑動】時間為【3000】毫秒,然后確定即可;

繼續(xù)?添加事件【等待】——設置等待時間為【1000】毫秒;

繼續(xù) 添加事件?【設置面板狀態(tài)】——勾選【輪播測試圖】動態(tài)面板——選擇狀態(tài)為【Next】————勾選【向后循環(huán)】——循環(huán)時間及進入動畫可以自行設置,然后確定提交即可;

3.選中【按鈕3】——添加事件【設置面板狀態(tài)】——勾選【輪播測試圖】動態(tài)面板——選擇狀態(tài)為對應的【banner3】——進入動畫【向左滑動】時間為【3000】毫秒,退出動畫【向左滑動】時間為【3000】毫秒,然后確定即可;

繼續(xù)?添加事件【等待】——設置等待時間為【1000】毫秒;

繼續(xù) 添加事件?【設置面板狀態(tài)】——勾選【輪播測試圖】動態(tài)面板——選擇狀態(tài)為【Next】————勾選【向后循環(huán)】——循環(huán)時間及進入動畫可以自行設置,然后確定提交即可;

第五步:動態(tài)面板【banner2】、【banner3】里面的按鈕效果時間設置和動態(tài)面板【banner1】一樣;但是,對應的在2、3按鈕的“配置動作”設置中,選擇狀態(tài)分別為對應的【banner2】、【banner3】;

點擊運行,就可以實現自動輪播、點擊按鈕切換了。

這個里面的時間設置的有點長,如果要體驗好一些的話,大家自己設置一個合適的時間即可。

 

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 請問如何在此基礎上實現鼠標點擊左右切換后還能回到循環(huán)?

    來自北京 回復
    1. 第五步自己設置體驗一下喲,觀察一下事件是怎么設置的;這里面點擊切換之后,輪播圖會再次循環(huán)的;

      來自上海 回復
  2. 請問添加小按鈕,右上角的1,2,3怎么弄出來的?

    來自北京 回復
    1. 這個是后面給這些按鈕添加動作的時候出現的,代表這個按鈕是被添加了事件的;前面的截圖就是第三步里面,應該是沒有1,2,3的;因為是之前就把動作設置好了的才截圖導致出現1,2,3;

      來自上海 回復
    2. 動手做了一下,明白了,謝謝

      來自北京 回復
    3. 親 這個添加了事件后自動就會有的。 ??

      來自北京 回復
    4. 曉得了

      來自北京 回復