青銅修煉手冊:Axure圖片輪播效果(二)

傳送門:Axure圖片輪播效果(一):https://blog.csdn.net/qq_27884377/article/details/81234948

在上一節中,我們講到了Axure的一個基本輪播效果,可是我們在網上瀏覽其他網頁的時候通常會發現在輪播圖的下方會有一排的數字頁籤,當圖片轉換的時候,下方的數字也會跟着轉換,接下來我們會說一下該效果是怎麼實現的。

實現步驟:

1.首先我們先拖放6個圓形進畫布,大小爲13,然後設置第一個的顏色爲紅色,其餘的就爲黑色,文字顏色都爲白色。

             2.選中6個圓形再單擊鼠標右鍵,在彈出的菜單中選擇“轉換爲動態面板”

                   3.雙擊動態面板,設置動態面板的名稱爲 “number”,並將第一個狀態點中,複製5次:

                   4.進入動態面板“number”的狀態“State2~State6”,並將對應的圓形的填充顏色改爲紅色,其他圓形改爲黑色:

                  5.將動態面板放到合適的地方,放入一個文本標籤,將其隱藏,命名爲“numberIndex”,用於記錄動態面板切換到的狀態名稱

               6. 爲動態面板“picture”添加“狀態改變時”的用例,設置動作爲“設置文本”->“numberIndex”->"面板狀態"->"this"

             7.繼續上一步,添加動作“設置面板狀態”->“number”,選擇狀態爲“Value”,然後點擊後方“fx”按鈕,打開編輯文本頁面:

在編輯文本的界面單擊“添加局部變量”按鈕,創建一個局部變量,命名爲“i”;局部變量“i”存入的內容爲文本框“numberIndex” 的“元件文字”,然後,在文本編輯區域寫入公司“[[i]]”,這樣就將動態面板切換到了名稱與“numberIndex”元件名字相同的狀態

8.然後就可以點進預覽了

效果查看地址:https://1fvi2o.axshare.com

原型RP文件下載地址:https://download.csdn.net/download/qq_27884377/10577930

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章