淘寶、天貓和京東等購(gòu)物網(wǎng)站已經(jīng)成為我們生活中的一部分，每每打開我們都可以看到有一個(gè)廣告窗口，圖片在里面循環(huán)滾動(dòng)播放，那么它是怎么實(shí)現(xiàn)的呢？利用Axure軟件我們可以簡(jiǎn)單實(shí)現(xiàn)，下面我將向大家分享一下具體步驟，希望能夠幫助到大家。

原材料：

圖片、動(dòng)態(tài)面板、按鈕、狀態(tài)欄

注意命名，狀態(tài)欄內(nèi)的原點(diǎn)按鈕命名和對(duì)應(yīng)的圖片一致，后面有妙用；按鈕和狀態(tài)欄都可以用矩形輕松制作而成。

步驟/方法

第一步：設(shè)置動(dòng)態(tài)面板內(nèi)容

動(dòng)態(tài)面板狀態(tài)設(shè)置成兩層動(dòng)態(tài)狀態(tài)，分別是img1、img2，內(nèi)置相應(yīng)的圖片，并將圖片和動(dòng)態(tài)面板的大小調(diào)成一致，本次案例中的大小是W:850,H:400。

在主界面將按鈕和狀態(tài)移入動(dòng)態(tài)面板框內(nèi)，調(diào)整好位置，設(shè)置left和right按鈕的默認(rèn)狀態(tài)為“隱藏”。

第二步：設(shè)置動(dòng)態(tài)面板滾動(dòng)狀態(tài)

選中動(dòng)態(tài)面板“dong1”—元件交互與說(shuō)明“載入時(shí)”添加用例—?jiǎng)討B(tài)面板“設(shè)置面板狀態(tài)”—dong1（動(dòng)態(tài)面板）—“previous”“向前循環(huán)”“循環(huán)間隔4000毫秒”—進(jìn)入動(dòng)畫“向左滑動(dòng)”“向左滑動(dòng)”—“如果隱藏則顯示面板” （以上秒數(shù)可以自由選擇）

第三步：設(shè)置點(diǎn)擊圖片打開廣告鏈接的交互動(dòng)作

雙擊動(dòng)態(tài)面板“dong1”進(jìn)入動(dòng)態(tài)面板狀態(tài)管理—進(jìn)入面板狀態(tài)“img1”—選中圖片“img1”—元件交互與說(shuō)明“鼠標(biāo)單擊時(shí)”—鏈接“打開鏈接”—打開位置“當(dāng)前窗口”（也可以選中新窗口）—勾選“鏈接到url或文件”—超鏈接“http://www.baidu.com”（輸入你的目標(biāo)鏈接地址）（“img2”同）

第四步：設(shè)置按鈕、狀態(tài)欄“選中”狀態(tài)

選中“l(fā)eft”按鈕—元件屬性與樣式“屬性”—交互樣式設(shè)置“選中”（注意不要點(diǎn)錯(cuò)為禁用復(fù)選框的選中）—勾選“填充顏色”復(fù)選框并選擇一個(gè)較深顏色，如#999999。（“right”同）

選中狀態(tài)欄的原點(diǎn)按鈕“img1”—元件屬性與樣式“屬性”—交互樣式設(shè)置“選中”—勾選“填充顏色”復(fù)選框并選擇一個(gè)橙色，如#FF6600。（“img2”同）

選中狀態(tài)欄的原點(diǎn)按鈕“img1”和“img2”—元件屬性與樣式“屬性”—輸入[選項(xiàng)]組名稱—輸入“zu1”（隨意輸入都可以）

第五步：設(shè)置按鈕、狀態(tài)欄的交互事件

選中“l(fā)eft”按鈕—元件交互與說(shuō)明“鼠標(biāo)單擊時(shí)”—?jiǎng)討B(tài)面板“設(shè)置面板狀態(tài)”—dong1（動(dòng)態(tài)面板）—“next”“向前循環(huán)”—進(jìn)入動(dòng)畫“向右滑動(dòng)”“向右滑動(dòng)”

選中“right”按鈕—元件交互與說(shuō)明“鼠標(biāo)單擊時(shí)”—?jiǎng)討B(tài)面板“設(shè)置面板狀態(tài)”—dong1（動(dòng)態(tài)面板）—“provious”“向前循環(huán)”—進(jìn)入動(dòng)畫“向左滑動(dòng)”“向左滑動(dòng)”

left

right

選中“l(fā)eft”按鈕—元件交互與說(shuō)明“鼠標(biāo)移入時(shí)”—元件“選中”—勾選“當(dāng)前元件”—選中狀態(tài)“值”“true”（“right”同）

選中“l(fā)eft”按鈕—元件交互與說(shuō)明“鼠標(biāo)移出時(shí)”—元件“選中”—勾選“當(dāng)前元件”—選中狀態(tài)“值”“false”（“right”同）

選中狀態(tài)欄的原點(diǎn)按鈕“img1”—元件交互與名稱“鼠標(biāo)單擊時(shí)”—?jiǎng)討B(tài)面板“設(shè)置面板狀態(tài)”—勾選“dong1”—選擇狀態(tài)“Value”—狀態(tài)名稱“[[This.name]]”(利用到了我們之間巧妙的命名了)（“img2”同）

第六步：設(shè)置動(dòng)態(tài)面板與按鈕和狀態(tài)欄的交互

選中動(dòng)態(tài)面板“dong1”—元件交互與說(shuō)明“鼠標(biāo)移入時(shí)”：

• 元件“顯示”—勾選“right”“l(fā)eft”—可見性“顯示”
• 動(dòng)態(tài)面板“設(shè)置面板狀態(tài)”—勾選“set dong1”—選擇狀態(tài)“停止循環(huán)”

選中動(dòng)態(tài)面板“dong1”—元件交互與說(shuō)明“狀態(tài)改變時(shí)”—

• “添加條件”—面板狀態(tài)“this”==狀態(tài)“img1”（即描述“if 面板狀態(tài)于 This == img1”）—元件“選中”—勾選“img1（形狀）”—“值”“true” （這里的img1（形狀）指的是狀態(tài)欄里的原點(diǎn)按鈕1）
• “添加條件”—面板狀態(tài)“this”==狀態(tài)“img2”（即描述“Else if 面板狀態(tài)于 This == img2”）—元件“選中”—勾選“img2（形狀）”—“值”“true” （這里的img2（形狀）指的是狀態(tài)欄里的原點(diǎn)按鈕2）

完成后動(dòng)態(tài)面板的交互如下圖

第七步：動(dòng)態(tài)面板“鼠標(biāo)移出”交互設(shè)置（方法一）

情形一：不設(shè)置移出條件

選中動(dòng)態(tài)面板“dong1”—元件交互與說(shuō)明“鼠標(biāo)移出時(shí)”—元件“隱藏”—勾選“l(fā)eft”和“right”—可見性“隱藏”—?jiǎng)討B(tài)面板“設(shè)置面板動(dòng)態(tài)”（重復(fù)第二步）

Bug：當(dāng)鼠標(biāo)從動(dòng)態(tài)面板（圖片）移入“l(fā)eft”和“right”按鈕時(shí)，也同樣屬于鼠標(biāo)移出動(dòng)態(tài)面板，導(dǎo)致圖片恢復(fù)滾動(dòng)效果，“l(fā)eft”和“right”在隱藏和顯示出反復(fù)閃屏轉(zhuǎn)換。

情形二：在情形一的基礎(chǔ)上設(shè)置移出條件

此步驟需要使用到函數(shù)和局部變量。鼠標(biāo)的函數(shù)“Cursor.x”和“Cursor.y”，可以點(diǎn)擊“fx”，再點(diǎn)擊“插入變量或函數(shù)”來(lái)獲取。

局部變量主要是點(diǎn)擊“fx”—“添加局部變量”—“dong1”=“元件”“dong1”（如下圖）

選中動(dòng)態(tài)面板“dong1”—元件交互與說(shuō)明“鼠標(biāo)移出時(shí)”—添加條件—符合“任何”

• “值”“[[Cursor.y]]””<””值”“[[dong1.top]]” （含義就是：鼠標(biāo)的y坐標(biāo)小于動(dòng)態(tài)面板“dong1”的上邊界）
• “值”“[[Cursor.y]]””>””值”“[[dong1.bottom]]” （含義就是：鼠標(biāo)的y坐標(biāo)小于動(dòng)態(tài)面板“dong1”的下邊界）
• “值”“[[Cursor.x]]””<””值”“[[dong1.left]]” （含義就是：鼠標(biāo)的y坐標(biāo)小于動(dòng)態(tài)面板“dong1”的左邊界）
• “值”“[[Cursor.x]]””>””值”“[[dong1.right]]” （含義就是：鼠標(biāo)的y坐標(biāo)小于動(dòng)態(tài)面板“dong1”的右邊界）

這樣子是不是就可準(zhǔn)確實(shí)現(xiàn)鼠標(biāo)移出效果了呢？

Bug：鼠標(biāo)移出效果將會(huì)失效，即移出鼠標(biāo)時(shí)仍然不會(huì)執(zhí)行動(dòng)態(tài)窗口滾動(dòng)的效果。原因是，該動(dòng)作只在鼠標(biāo)移出動(dòng)態(tài)窗口“dong1”的那一瞬間執(zhí)行，此時(shí)，對(duì)于鼠標(biāo)的坐標(biāo)定位會(huì)早于移出動(dòng)作執(zhí)行，即鼠標(biāo)坐標(biāo)定位仍然停留在動(dòng)態(tài)窗口內(nèi)，因此條件判斷不符合條件，動(dòng)作無(wú)法執(zhí)行。

情形三：在情形二的基礎(chǔ)上縮小移出的判斷空間范圍

基于情形二的bug，鼠標(biāo)定位會(huì)比移出動(dòng)作執(zhí)行早一點(diǎn)，可以轉(zhuǎn)換思路，將判斷范圍縮小。

選中動(dòng)態(tài)面板“dong1”—元件交互與說(shuō)明“鼠標(biāo)移出時(shí)”—添加條件—符合“任何”

• “值”“[[Cursor.y]]””<””值”“[[dong1.top+10]]” （上邊界向下縮小了10）
• “值”“[[Cursor.y]]””>””值”“[[dong1.bottom-10]]” （下邊界向上縮小了10）
• “值”“[[Cursor.x]]””<””值”“[[dong1.left+10]]” （左邊界向右縮小了10）
• “值”“[[Cursor.x]]””>””值”“[[dong1.right-10]]” （右邊界向左縮小了10）

這樣子修改之后基本上可以滿足使用要求，但仍存在bug。用極限思想思考一下，當(dāng)鼠標(biāo)移動(dòng)速度無(wú)限接近無(wú)窮時(shí)，總會(huì)在達(dá)到一個(gè)臨界速度后，在執(zhí)行移動(dòng)動(dòng)態(tài)窗口所需的時(shí)間內(nèi)移出距離超過(guò)縮短的邊界值10，則又會(huì)出現(xiàn)情形二的bug。

第八步：新增動(dòng)態(tài)面板“dong2”解決bug(方法二）

第七步提供的是一種實(shí)現(xiàn)移出效果的思路，雖然有小bug，但也是非常值得學(xué)習(xí)的，用在其他需要的原型中也是可以取到很好的效果的。

步驟七無(wú)法解決的問(wèn)題，實(shí)質(zhì)是無(wú)法做到讓“移入‘left’和‘right’按鈕”不包括在“移出動(dòng)態(tài)面板‘dong1’”這個(gè)動(dòng)作范圍內(nèi)。因此，我們可以轉(zhuǎn)換思路將“l(fā)eft”、“right”按鈕和狀態(tài)欄都納入到動(dòng)態(tài)面板內(nèi)，但因?yàn)椤發(fā)eft”、“right”按鈕和狀態(tài)欄是不隨圖片滾動(dòng)，所以無(wú)法放置在同一個(gè)動(dòng)態(tài)面板內(nèi)。我們將采取的解決方法是用另一個(gè)相同大小的動(dòng)態(tài)面板“dong2”對(duì)動(dòng)態(tài)面板“dong1”進(jìn)行覆蓋，并將“l(fā)eft”、“right”按鈕和狀態(tài)欄放置在動(dòng)態(tài)面板“dong2”內(nèi)。

1）放入動(dòng)態(tài)面板“dong2”，設(shè)置大小W:850,H:400；將“l(fā)eft”、“right”按鈕和狀態(tài)欄剪切粘貼放入動(dòng)態(tài)面板“dong2”的面板狀態(tài)“state1”中，同時(shí)，重新設(shè)置第六步動(dòng)態(tài)面板“dong1”與狀態(tài)欄按鈕“img1”和“img2”的選中交互。

2）設(shè)置動(dòng)態(tài)面板“dong2”交互動(dòng)作：

選中動(dòng)態(tài)面板“dong2”—元件交互與說(shuō)明“鼠標(biāo)移入時(shí)”—元件“顯示”—“right”“l(fā)eft”—?jiǎng)討B(tài)面板“設(shè)置面板狀態(tài)”—勾選“dong1”—選擇狀態(tài)“停止循環(huán)”

選中動(dòng)態(tài)面板“dong2”—元件交互與說(shuō)明“鼠標(biāo)移出時(shí)”—元件“隱藏”—“right”“l(fā)eft”—?jiǎng)討B(tài)面板“設(shè)置面板狀態(tài)”—勾選“dong1”—選擇狀態(tài)“previous”“向前循環(huán)”“循環(huán)間隔4000毫秒”—進(jìn)入動(dòng)畫“向左滑動(dòng)”“向左滑動(dòng)”—“如果隱藏則顯示面板”

經(jīng)過(guò)動(dòng)態(tài)面板“dong2”對(duì)“dong1”的覆蓋可以完美地解決地第七步中存在的問(wèn)題，但又會(huì)出現(xiàn)新的問(wèn)題，由于“dong1”已經(jīng)被覆蓋，所以第三步中設(shè)置的點(diǎn)擊圖片打開鏈接的功能將會(huì)失效。因此，我們需要借助一個(gè)矩形來(lái)使解決這一問(wèn)題。

3）打開動(dòng)態(tài)面板“dong2”的面板狀態(tài)“state1”，設(shè)置一個(gè)透明的矩形大小與動(dòng)態(tài)面板“dong2”完全重合，并將矩形置于底層。

4）選中矩形—元件交互和說(shuō)明“鼠標(biāo)單擊時(shí)”—添加條件—“面板狀態(tài)”“dong1”==“狀態(tài)”“img1”（即if 面板狀態(tài)于 dong1 == img1）—鏈接“打開鏈接”—打開位置“當(dāng)前位置”—勾選“連接到url或文件”—超鏈接“http://www.baidu.com”（同理設(shè)置動(dòng)態(tài)面板“dong1”==img2時(shí)）

選中矩形—元件交互和說(shuō)明“鼠標(biāo)單擊時(shí)”—添加條件—“面板狀態(tài)”“dong1”==“狀態(tài)”“img2”（即if 面板狀態(tài)于 dong1 == img2）—鏈接“打開鏈接”—打開位置“當(dāng)前位置”—勾選“連接到url或文件“—超鏈接“www.taobao.com”

至此，已經(jīng)完美的實(shí)現(xiàn)廣告循環(huán)播放效果，本文主要是跟大家交流對(duì)于實(shí)現(xiàn)循環(huán)播放效果的兩種不同思路，如果認(rèn)為后一種方法更好的可以將第三步和第七步多余的命令刪除。

第一次寫這種教案式的文章，可能寫得有點(diǎn)啰嗦（我自己都覺得有些啰嗦，但又怕太簡(jiǎn)潔小白看不懂），希望大家多多包涵，有什么問(wèn)題也希望大家可以指出來(lái)，以后會(huì)繼續(xù)努力爭(zhēng)取做的更好。謝謝閱讀！

本文由 @jianyang 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。