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

爬行蟑螂也是剛開始使用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ā)布于人人都是產品經理。未經許可,禁止轉載
請問如何在此基礎上實現鼠標點擊左右切換后還能回到循環(huán)?
第五步自己設置體驗一下喲,觀察一下事件是怎么設置的;這里面點擊切換之后,輪播圖會再次循環(huán)的;
請問添加小按鈕,右上角的1,2,3怎么弄出來的?
這個是后面給這些按鈕添加動作的時候出現的,代表這個按鈕是被添加了事件的;前面的截圖就是第三步里面,應該是沒有1,2,3的;因為是之前就把動作設置好了的才截圖導致出現1,2,3;
動手做了一下,明白了,謝謝
親 這個添加了事件后自動就會有的。 ??
曉得了