怎樣用axure做圖片自動播放？

01-15

不要重新載入的。

既然要實現「自動播放」，那就要設置一個循環了，步驟如下：

1.設置一個動態面板，暫且命名為「img」，為其設置多個狀態，每個狀態下放入一張圖片（就是你想要播放的那些圖片）

2.設置頁面載入事件(OnPageLoad)：設置img狀態狀態2

3.對img面板添加事件：OnPanelStateChange(動態面板狀態改變時)，具體設置請看下圖：

搞定

原理：img默認狀態為狀態1，頁面載入事件將其狀態變為狀態2，於是觸發了OnPanelStateChange事件，第一次觸發時img從狀態2變為狀態3，而這再次觸發了OnPanelStateChange事件，於是其狀態變為狀態1，然後，OnPanelStaeChange再次被觸發，img變為狀態2，這便形成了一個完整的循環。

註：等待時間一定要大於圖片切換的動畫事件，否則程序無法正確判斷當前是否處於動畫狀態，造成循環失效（在jquery中也要判斷是否處於動畫狀態：is animated）

評論回復不能發圖？只好修改答案了，Criss請看這裡：

1.時間間隔的問題，其實我上面已經說了，貌似沒有什麼好的解決辦法。通過變數，我們的確能控制img面板脫離「用例1 - 用例2 - 用例3 -
用例1- 用例2 -
用例3」的循環體系，從而終止自動播放，但是img面板在單獨某個實例當中的動畫效果我們是沒法讓它終止的，因為Axure沒有類似jquery中的
stop()函數，你可以參考這裡：

jQuery 停止動畫

2.關於變數，它起的是一個中間橋樑作用，比如上面的自動播放，它的循環原理是通過不斷觸發OnPageStateChange事件來實現的，理論上除非瀏覽器崩潰，不然這個循環會一直下去。

這時候如果你想關掉自動播放，就得終止循環，也就是破壞循環的觸發條件，在這裡設置一個變數，看下圖：

對比上面的原型，它多了一個判定條件」變數值slide等於1「，這個變數值我是通過一個名為trigger的動態面板實現的，第一次點擊，設定slide為1，自動播放開始；第二次點擊，設置變數為0，循環被破壞，自動播放被終止。

這是trigger面板：

這是trigger面板狀態1：

這是trigger面板狀態2：

然後還添加了手動切換的功能，左右各一個

可能有點亂，很少在工作中正式使用Axure，只用它做過一次移動APP原型。我學習Axure的初衷是為了學js。。。

非常簡單的，請安裝axure7.0，然後三步搞定，不需要神馬條件代碼，非常簡單

準備工作：

創建動態面板，你想做N個圖片自動循環播放，就在此動態面板上創建對應的N個狀態，每一個狀態裡面對應一張圖片

按圖來，

非常簡單，3分鐘搞定

效果圖：http://ahzcnr.axshare.com/

輪播圖是網頁設計或者APP設計常見的元素，學會使用axure原型工具製作輪播圖對製作PC端或者移動端的原型都非常有幫助。現在講講如何使用axure8.0製作輪播圖原型~~

步驟一：（輪播圖動態面板）

首先，拖一個動態面板至畫布中間，設置大小為670X320，命名為「輪播圖」；

然後，為該動態面板設置3個面板狀態，分別為圖1，圖2和圖3，並分別在每個面板狀態分別放一張圖片；

最後，為該動態面板添加一個「載入時」用例，在用例中設置面板狀態為：

選擇狀態：Next，向後循環，循環間隔4000ms；
進入動畫：向左滑動700ms；
退齣動畫：向左滑動700ms。

步驟二：（輪播按鈕動態面板）

首先，拖一個動態面板至「輪播圖」動態面板的正下方適當位置，設置大小為134X11，命名為「輪播按鈕」；

然後，為該動態面板設置3個面板狀態，分別為輪播按鈕1，輪播按鈕2和輪播按鈕3，並在每個面板狀態分別放3個白色矩形。輪播按鈕1狀態中的第1個白色矩形透明度設置為50%，輪播按鈕2狀態中的第2個白色矩形透明度設置為50%，輪播按鈕3狀態中的第3個白色矩形透明度設置為50%；

最後，為該動態面板添加一個「載入時」用例，用例中設置面板狀態為：

選擇狀態：Next，向後循環，循環間隔4000ms；
進入動畫：逐漸700ms；
退齣動畫：逐漸700ms。

好了！預覽即可以看到輪播圖自動輪播的效果了，同時輪播按鈕也跟隨著變化。

作者：維度

轉載請註明出處：axure原型設計之輪播圖 - 維度

來一發！樓上都說得好多。

正好當初自學Axure的第三天就為做了個圖片自動輪播而沾沾自喜過，咳咳，別笑話

當初那個輪播效果是用的變數，現在才發現自己當初有多牛了，所以沾沾自喜是有道理的哈哈

要做輪播效果當然得用動態面板，這種自動切換是不能控制自身的展示效狀態的（新手別嘗試別的方法），所以引入兩個動態面板，一個用於做你想要的輪播頁面主體（zhuti），一個輔助控制輪播的動作（fuzhu）。

1. 首先為你的主體面板設置n個狀態（我設置了三個），每個狀態插入你想要顯示的圖片

2. 設置頁面交互：頁面載入時，輔助面板切換可見性

3. 然後就讓輔助面板顯示1500ms後主體面板切換狀態至「next」，當輔助面板隱藏時繼續切換回顯示狀態。記住一定要加循環，就是勾選狀態切換下面的「Wrap from last to first」，保證輪播到最後一張圖片時能夠回到第一張。

另外輪播動畫效果可以自定義添加，時間根據需要設置。

我自己不知道，但是在逛貼吧的時候看到了這個，剛好是這個，希望對你有用製作圖片輪播_axure交流吧

Axure7中動態面版切換的選項增加了「向前」和「向後」，所以做自動輪播就變得很方便。

思路和 @eddie hong 一樣，構建一個死循環來不斷觸發動態面版狀態的切換，簡單說來就是引入一個輔助組件，這個組件的狀態被修改時觸發動態面版狀態的切換，動態面版狀態切換時又觸發改變輔助組件的狀態，於是形成循環。

詳細如下：

1.添加一個動態面版用來展示要播放的圖片，再添加一個輔助動態面版來構建死循環；

2.輔助動態面版以隱藏和顯示作為觸發條件，這裡需要分別為OnShow（顯示動態面版）和OnHide（隱藏動態面版）增加事件。

以OnShow為例，當顯示輔助動態面版時，切換展示動態面板的狀態到下一個

同理添加OnHide，如果找不到這兩個事件記得點擊More Events（更多事件）

3.為展示動態面版添加事件，當狀態改變時修改輔助動態面版的可視狀態

4.循環主體已經完成，但還需要一個事件來觸發它，這裡使用OnPageLoad（頁面載入時）事件，可以是頁面載入時切換輔助動態面版的可視狀態，也可以是頁面載入時修改展示動態面版的狀態。

以修改輔助動態面版的可視狀態為例：

這裡使用動態面版作為輔助組件是因為它本身是透明的，所以切換可視狀態不會影響頁面的展示效果，因此這裡可以用圖片熱區或者填充色為透明的矩形來代替。

當然這只是一種觸發方式，其它任意方法只要能觸發循環都是OK的。

為什麼我這樣設置之後還不可以輪播呢？望幫忙 @eddie hong

不知如何做 OnMouseEnter滑鼠移入停止播放、OnMouseOut滑鼠移出繼續播放等，，新手糾結中

最近剛好也在試著用Axure 7RP 漢化版。也試了一下，在7.0下這個還是比較簡單的：

增加一個動態面板和image. 動態面板設置3個狀態，state1,state2,state3.

在動態面板的"載入"時設置用例， image調入圖片1，增加3個1秒的延時，然後設置動態面板狀態為state2;

在動態面板的」狀態改變「中增加用例，分別判斷當前狀態，設置不同圖片，延時，然後變更狀態。當狀態成為state3時，設置成state1. 這樣就反覆循環了。

感謝邀請，@eddie hong 已經回答的比較完整了。就不重述了。

其實主要就是利用OnPageLoad觸發條件，實現自動播放。

然後比較麻煩的，就是 OnMouseEnter滑鼠移入停止播放、OnMouseOut滑鼠移出繼續播放等

但是不推薦做的這麼麻煩了。高保真的另算了。

Axure7.0動態面板是支持自動循環選項的：

如果需要滑鼠懸浮時候停止的話，則在對應的狀態圖片上添加動作

你好，為什麼我的Axure裡面沒有OnPageLoad觸發條件的選項呢？

我的裡面只有「點擊時」、「滑鼠移入時」、「滑鼠移出時」 ……