案例4:使用動(dòng)態(tài)面板部件制作簡(jiǎn)單的輪播廣告

  • 2022-03-18 11:45:05
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來(lái)源:http://m.iy5y368.cn

首先準(zhǔn)備好三張廣告圖像,見(jiàn)圖82。

1.jpg

(圖82)

第一步:在【部件】面板中拖放一個(gè)圖像部件到設(shè)計(jì)區(qū)域,雙擊該部件導(dǎo)入廣告圖 1,并將其尺寸設(shè)置為400×300像素,然后右鍵單擊該圖像部件,在彈出的關(guān)聯(lián)菜單中選擇【轉(zhuǎn)換為動(dòng)態(tài)面板】,見(jiàn)圖83。

1.jpg

(圖83)

第二步:在右側(cè)的部件【屬性】面板中,給動(dòng)態(tài)面板部件命名為【輪播廣告】,在學(xué)習(xí)過(guò)程中要養(yǎng)成給部件命名的好習(xí)慣。然后雙擊動(dòng)態(tài)面板,在彈出的【動(dòng)態(tài)面板狀態(tài)管理】對(duì)話框中,單擊【State1】,然后單擊【快速?gòu)?fù)制】圖標(biāo),快速?gòu)?fù)制兩份動(dòng)態(tài)面板狀態(tài)【Stete2】和【State3】(注意:使用快速?gòu)?fù)制功能會(huì)同時(shí)復(fù)制【State1】中的內(nèi)容,也就是那張廣告圖1),見(jiàn)圖84,單擊【確定】按鈕關(guān)閉【動(dòng)態(tài)面板狀態(tài)管理】。

第三步:在右側(cè)的【Outline】概要面板中,可以看到輪播廣告這個(gè)動(dòng)態(tài)面板中的三個(gè)不同的狀態(tài)以及其中的內(nèi)容,見(jiàn)圖85?,F(xiàn)在三個(gè)狀態(tài)中的內(nèi)容都是一樣的,分別雙擊【State2】然后再次雙擊【State2】中的圖像替換成廣告圖2,同樣的方法替換廣告圖3,替換后見(jiàn)圖86。

1.jpg

(圖84)

(圖85)

1.jpg

(圖86)

第四步:通常網(wǎng)站建設(shè)小編認(rèn)為我們見(jiàn)到的圖像輪播廣告都是在打開(kāi)頁(yè)面后等待幾秒鐘開(kāi)始輪播的,所以這里我們使用【頁(yè)面載入時(shí)】事件來(lái)實(shí)現(xiàn)(你也可以使用動(dòng)態(tài)面板部件的【載入時(shí)】事件來(lái)實(shí)現(xiàn)。隨著學(xué)習(xí)的深入你會(huì)發(fā)現(xiàn),很多效果的實(shí)現(xiàn)方法都不止一種)?,F(xiàn)在回到Index頁(yè)面并單擊頁(yè)面空白處,在右側(cè)的【頁(yè)面屬性】面板中雙擊【頁(yè)面載入時(shí)】事件,見(jiàn)圖87,然后在彈出的【用例編輯器】窗口頂部給用例命名為【圖像輪播】,在左側(cè)的動(dòng)作列表中新增【設(shè)置面板狀態(tài)】動(dòng)作,在右側(cè)的配置面板中勾選【輪播廣告】動(dòng)態(tài)面板,并設(shè)置【選擇狀態(tài)】為【下一個(gè)】。勾選【向前循環(huán)】,勾選【循環(huán)間隔】并設(shè)置間隔時(shí)間為【3000】毫秒,勾選【第一個(gè)狀態(tài)延遲 3000毫秒】(這個(gè)選項(xiàng)的意思是,當(dāng)頁(yè)面打開(kāi)時(shí)等待3秒鐘之后再開(kāi)始輪播)。設(shè)置【進(jìn)入/退出動(dòng)畫(huà)】為【淡入淡出】效果,動(dòng)畫(huà)時(shí)間為【500】毫秒,見(jiàn)圖88,單擊【確定】按鈕關(guān)閉【用例編輯器】。

第五步:在頂部的工具欄中單擊【預(yù)覽】按鈕,或者按下快捷鍵F5/Shift+Command+P,快速預(yù)覽交互效果。

1.jpg

(圖87)

1.jpg

(圖88)


當(dāng)前文章標(biāo)題:案例4:使用動(dòng)態(tài)面板部件制作簡(jiǎn)單的輪播廣告

當(dāng)前URL:http://m.iy5y368.cn/news/wzzz/3381.html

上一篇:案例3:添加一個(gè)自定義部件樣式

下一篇:挑戰(zhàn)2:可單擊交互的輪播廣告

網(wǎng)站建設(shè)、抖音推廣、頭條推廣、微信朋友圈推廣、快手推廣專線:15368242187(微信同號(hào))