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

原材料：

圖片、動態面板、按鈕、狀態欄

注意命名，狀態欄內的原點按鈕命名和對應的圖片一致，后面有妙用；按鈕和狀態欄都可以用矩形輕松制作而成。

步驟/方法

第一步：設置動態面板內容

動態面板狀態設置成兩層動態狀態，分別是img1、img2，內置相應的圖片，并將圖片和動態面板的大小調成一致，本次案例中的大小是W:850,H:400。

在主界面將按鈕和狀態移入動態面板框內，調整好位置，設置left和right按鈕的默認狀態為“隱藏”。

第二步：設置動態面板滾動狀態

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

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

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

第四步：設置按鈕、狀態欄“選中”狀態

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

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

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

第五步：設置按鈕、狀態欄的交互事件

選中“left”按鈕—元件交互與說明“鼠標單擊時”—動態面板“設置面板狀態”—dong1（動態面板）—“next”“向前循環”—進入動畫“向右滑動”“向右滑動”

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

left

right

選中“left”按鈕—元件交互與說明“鼠標移入時”—元件“選中”—勾選“當前元件”—選中狀態“值”“true”（“right”同）

選中“left”按鈕—元件交互與說明“鼠標移出時”—元件“選中”—勾選“當前元件”—選中狀態“值”“false”（“right”同）

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

第六步：設置動態面板與按鈕和狀態欄的交互

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

• 元件“顯示”—勾選“right”“left”—可見性“顯示”
• 動態面板“設置面板狀態”—勾選“set dong1”—選擇狀態“停止循環”

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

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

完成后動態面板的交互如下圖

第七步：動態面板“鼠標移出”交互設置（方法一）

情形一：不設置移出條件

選中動態面板“dong1”—元件交互與說明“鼠標移出時”—元件“隱藏”—勾選“left”和“right”—可見性“隱藏”—動態面板“設置面板動態”（重復第二步）

Bug：當鼠標從動態面板（圖片）移入“left”和“right”按鈕時，也同樣屬于鼠標移出動態面板，導致圖片恢復滾動效果，“left”和“right”在隱藏和顯示出反復閃屏轉換。

情形二：在情形一的基礎上設置移出條件

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

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

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

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

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

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

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

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

選中動態面板“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。用極限思想思考一下，當鼠標移動速度無限接近無窮時，總會在達到一個臨界速度后，在執行移動動態窗口所需的時間內移出距離超過縮短的邊界值10，則又會出現情形二的bug。

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

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

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

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

2）設置動態面板“dong2”交互動作：

選中動態面板“dong2”—元件交互與說明“鼠標移入時”—元件“顯示”—“right”“left”—動態面板“設置面板狀態”—勾選“dong1”—選擇狀態“停止循環”

選中動態面板“dong2”—元件交互與說明“鼠標移出時”—元件“隱藏”—“right”“left”—動態面板“設置面板狀態”—勾選“dong1”—選擇狀態“previous”“向前循環”“循環間隔4000毫秒”—進入動畫“向左滑動”“向左滑動”—“如果隱藏則顯示面板”

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

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

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

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

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

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

本文由 @jianyang 原創發布于人人都是產品經理。未經許可，禁止轉載。