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

原材料：

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

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

步驟/方法

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

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

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

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

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

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

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

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

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

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

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

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

選中“l(fā)eft”按鈕—元件交互與說明“鼠標單擊時”—動態(tài)面板“設(shè)置面板狀態(tài)”—dong1（動態(tài)面板）—“next”“向前循環(huán)”—進入動畫“向右滑動”“向右滑動”

選中“right”按鈕—元件交互與說明“鼠標單擊時”—動態(tài)面板“設(shè)置面板狀態(tài)”—dong1（動態(tài)面板）—“provious”“向前循環(huán)”—進入動畫“向左滑動”“向左滑動”

left

right

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

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

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

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

選中動態(tài)面板“dong1”—元件交互與說明“鼠標移入時”：

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

選中動態(tài)面板“dong1”—元件交互與說明“狀態(tài)改變時”—

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

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

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

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

選中動態(tài)面板“dong1”—元件交互與說明“鼠標移出時”—元件“隱藏”—勾選“l(fā)eft”和“right”—可見性“隱藏”—動態(tài)面板“設(shè)置面板動態(tài)”（重復第二步）

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

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

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

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

選中動態(tài)面板“dong1”—元件交互與說明“鼠標移出時”—添加條件—符合“任何”

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

這樣子是不是就可準確實現(xiàn)鼠標移出效果了呢？

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

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

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

選中動態(tài)面板“dong1”—元件交互與說明“鼠標移出時”—添加條件—符合“任何”

• “值”“[[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。用極限思想思考一下，當鼠標移動速度無限接近無窮時，總會在達到一個臨界速度后，在執(zhí)行移動動態(tài)窗口所需的時間內(nèi)移出距離超過縮短的邊界值10，則又會出現(xiàn)情形二的bug。

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

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

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

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

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

選中動態(tài)面板“dong2”—元件交互與說明“鼠標移入時”—元件“顯示”—“right”“l(fā)eft”—動態(tài)面板“設(shè)置面板狀態(tài)”—勾選“dong1”—選擇狀態(tài)“停止循環(huán)”

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

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

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

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

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

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

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

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