《Axure原型設(shè)計(jì)基礎(chǔ)》項(xiàng)目7 制作輪播圖

Axure原型設(shè)計(jì)基礎(chǔ)項(xiàng)目七制作輪播圖學(xué)習(xí)目標(biāo)1.掌握圖片垂直滾動的設(shè)置方法。2.掌握圖片水平滾動的設(shè)置方法。3.掌握圖片自動輪播的設(shè)置方法。4.掌握鼠標(biāo)指針移入時(shí)圖片停止循環(huán)的設(shè)置方法。5.掌握鼠標(biāo)指針移出時(shí)圖片繼續(xù)循環(huán)的設(shè)置方法。7.1圖片的垂直滾動如果想在頁面中顯示圖片,但圖片尺寸大于顯示區(qū)域,可以通過設(shè)置滾動條來解決。(1)導(dǎo)入5張圖片,調(diào)整為相同的高度和寬度,并同時(shí)轉(zhuǎn)換成動態(tài)面板。此時(shí),元件屬性面板會自動取消勾選“自動調(diào)整為內(nèi)容尺寸”,如圖7-1所示。圖7-1導(dǎo)入圖片(2)在動態(tài)面板右側(cè)添加垂直滾動條。在元件屬性面板中設(shè)置“滾動條”為“自動顯示垂直滾動條”,如圖7-2所示。圖7-2設(shè)置滾動條

(3)設(shè)置顯示的頁數(shù)。1)拖入一個(gè)矩形元件,用于顯示頁數(shù)。改變其樣式,并命名為“yeshu”,如圖7-3所示。圖7-3矩形元件2)給動態(tài)面板添加交互事件:[滾動時(shí)]→[設(shè)置文本]→[[This.scrollY/300+1]],用于獲取頁數(shù),如圖7-4所示。3)此時(shí)得到的數(shù)字是一個(gè)小數(shù),通過命令toFixed()對超出指定位數(shù)的小數(shù)進(jìn)行四舍五入,如圖7-5所示。圖7-4添加交互圖7-5四舍五入7.2圖片的水平滾動方法同圖片的垂直滾動的設(shè)置,只是在動態(tài)面板下方添加水平的滾動條。在元件屬性面板中設(shè)置“滾動條”為“自動顯示水平滾動條”,如圖7-6所示。圖7-6水平滾動條設(shè)置7.3圖片自動輪播以5張圖片進(jìn)行循環(huán)為例,并確保5張圖片尺寸一致。操作時(shí),先放入1張圖片元件并調(diào)整好尺寸,其余4張只需進(jìn)行復(fù)制即可。但是,這5張圖片需要放置在動態(tài)面板的5個(gè)狀態(tài)中,分別在5個(gè)狀態(tài)中進(jìn)行復(fù)制粘貼圖片元件的操作,顯然是件麻煩的事情。對此,利用元件管理面板中的“復(fù)制狀態(tài)”功能可使操作變得簡便,另外,把這5個(gè)狀態(tài)命名為“tu1”~“tu5”,如圖7-7所示。圖7-7自動輪播設(shè)置(1)先拖入一個(gè)圖片元件,設(shè)置合適的尺寸,這里是520像素×310像素,如圖7-8所示。然后,將其轉(zhuǎn)換為動態(tài)面板,并命名為“l(fā)unbotu”。這時(shí),在元件管理面板中就能看到這個(gè)動態(tài)面板及其默認(rèn)的首個(gè)狀態(tài)“tu1”,拖入的圖片元件就包含在這個(gè)狀態(tài)中。圖7-8拖入元件(2)在元件管理面板的元件列表中,選中“tu1”,單擊4次“復(fù)制狀態(tài)”按鈕,這樣就完成了狀態(tài)和圖片的同時(shí)復(fù)制。(3)為每個(gè)圖片元件指定不同的圖片,在元件管理面板的元件列表中,雙擊兩次圖片元件即可打開文件選擇窗口,選擇本地的圖片文件。(4)返回頁面,選中動態(tài)面板,為它添加觸發(fā)事件:“載入時(shí)”中的用例動作為“設(shè)置面板狀態(tài)”,“l(fā)unbotu”的“選擇狀態(tài)為:”為“Next”,勾選“向后循環(huán)”和“循環(huán)間隔”的選項(xiàng),并設(shè)置循環(huán)間隔為“2000”毫秒,如圖7-9所示。圖7-9設(shè)置面板狀態(tài)(5)幻燈片自動播放的效果制作完成,但是圖片的切換效果比較生硬,為了讓圖片切換有滑動的效果,需要設(shè)置“進(jìn)入動畫”為“向左滑動”“500”毫秒和“退出動畫”為“向左滑動”“500”毫秒,如圖7-10所示。圖7-10設(shè)置滑動效果7.4鼠標(biāo)指針移入圖片停止循環(huán)鼠標(biāo)指針移入“l(fā)unbotu”動態(tài)面板時(shí),圖片停止循環(huán),并在左側(cè)和右側(cè)分別顯示不同的圖標(biāo),單擊左側(cè)的圖標(biāo),圖片切換到上一張;單擊右側(cè)的圖標(biāo),圖片切換到下一張。(1)制作左側(cè)和右側(cè)的圖標(biāo),拖入矩形元件,輸入“<”或“>”,設(shè)置樣式,并分別命名為“l(fā)eft”和“right”,如圖7-11所示。圖7-11設(shè)置矩形樣式(2)隱藏“l(fā)eft”和“right”。因?yàn)樵陧撁婕虞d時(shí),這兩個(gè)圖標(biāo)應(yīng)處于隱藏狀態(tài)。(3)給“l(fā)unbotu”動態(tài)面板添加交互事件“鼠標(biāo)移入時(shí)”,用例動作為“顯示”和“設(shè)置面板狀態(tài)”,“l(fā)unbotu”的“選擇狀態(tài)為:”為“停止循環(huán)”,如圖7-12所示。圖7-12設(shè)置面板狀態(tài)(4)單擊“l(fā)eft”,切換到上一張圖片,為其添加的交互事件為“鼠標(biāo)單擊時(shí)”,用例動作為“設(shè)置面板狀態(tài)”,“l(fā)unbotu”的“選擇狀態(tài)為:”為“Previous”,設(shè)置“進(jìn)入動畫”為“向右滑動”“500”毫秒和“退出動畫”為“向右滑動”“500”毫秒,如圖7-13所示。圖7-13設(shè)置面板狀態(tài)(5)單擊“right”,切換到下一張圖片,為其添加的交互事件為“鼠標(biāo)單擊時(shí)”,用例動作為“設(shè)置面板狀態(tài)”,“l(fā)unbotu”的“選擇狀態(tài)為:”為“Next”,設(shè)置“進(jìn)入動畫”為“向左滑動”“500”毫秒和“退出動畫”為“向左滑動”“500”毫秒,如圖7-14所示。圖7-14設(shè)置滑動效果7.5鼠標(biāo)指針移出圖片繼續(xù)循環(huán)

(1)給“l(fā)unbotu”動態(tài)面板添加交互事件“鼠標(biāo)移出時(shí)”,用例動作為“隱藏”和“設(shè)置面板狀態(tài)”,“l(fā)unbotu”的“選擇狀態(tài)為:”為“Next”,勾選“向后循環(huán)”和“循環(huán)間隔”選項(xiàng),并設(shè)置循環(huán)間隔為“2000”毫秒,設(shè)置“進(jìn)入動畫”為“向左滑動”“500”毫秒和“退出動畫”為“向左滑動”“500”毫秒。(2)如果只是這樣設(shè)置,會出現(xiàn)錯(cuò)誤,因?yàn)椤發(fā)eft”和“right”元件也在“l(fā)unbotu”動態(tài)面板上,要判斷鼠標(biāo)指針是否移出“l(fā)unbotu”動態(tài)面板的范圍,就要加上條件判斷,如圖7-15所示。(3)因?yàn)橹灰獫M足其中一個(gè)條件即可,所以設(shè)置“符合”為“任何”。(4)上邊界和左邊界各加15,下邊界和右邊界各減15。因?yàn)槭髽?biāo)指針移出這個(gè)動作是在瞬間完成的,而其記錄的x、y坐標(biāo)是輪播圖里面的坐標(biāo),鼠標(biāo)指針移出后是找不到x、y坐標(biāo)的,因此根據(jù)經(jīng)驗(yàn)設(shè)置15像素這一數(shù)值