Axure动态面板实现轮播图
Axure中不乏許多的高級功能，其中輪播圖是我們在頁面中常見的一個高級功能，輪播圖的做法有很多種，但是就我個人而言認為使用動態面板做輪播簡單點。今天就讓我們來學習一下Axure中動態面板實現輪播圖吧。
一、基礎用法
1.首先老規矩我們從元件庫中拖拽元件進入我們的設計區域，今天我們使用的是動態面板。
2.我們雙擊動態面板進入編輯狀態。
3.我們點擊頂部的狀態區，并添加我們的狀態。（這里我添加了四個，并雙擊命名為img1234）
4.設置后之后，我們再把圖片元件拉入動態面板里，每個狀態放不同你需要的圖片，并調整大小。這里要注意不要推出編輯面板哦。設置好后我們就可以點擊關閉退出編輯面板了。
5.我們在將下好的左右翻頁圖標拖拽進來。你也可以選擇你喜歡的圖標拖拽進來。
6.大概樣式設置好后，我們就可以做交互事件了。首先我們選中我們的動態面板。找到新建交互。
7.找到動態面板中的狀態改變時。
8.然后鼠標點出來，再將鼠標移到狀態改變時那一行，找到右邊的啟用情形。
9.這時候來到我們的情形編輯。選擇添加情形。
?
10.這里添加的狀態意思是如果當前的面板狀態==img1，然后確定。
?11.后面我們就繼續添加情形。重復操作。每個情形對應每個狀態圖片哦。
?
12.接下來我們給翻頁圖標增加交互事件。
13.右邊的圖標也一樣。
14.接下來我們去預覽看看吧。
?點擊左右反轉圖標是可以使得輪播圖切換的。
二、豐富化。
我們一般看到的輪播圖1.進入頁面自動播放；2.會在輪播圖下面有小圓點，隨著圖片的切換，小圓點也切換起來；3.鼠標移入到輪播圖圖片時暫停播放，移出時恢復播放。接下來我們實現這兩個功能。
（一）進入頁面自動播放。
1.我們將鼠標點擊頁面，也就是動態面板外。然后新建交互事件。找到頁面載入時。
2.找到元件動作里的設置面板狀態。
3.再分別設置目標-STATE，勾選向后循環，進入動畫，點擊更多選項，循環間隔勾上。
4.我們預覽可以看到我們的輪播圖在我們進入頁面的時候就會自動播放拉。
（二）在輪播圖下面添加小圓點，隨著圖片的切換，小圓點也切換起來，同時點擊圓點也可以跳轉圖片。
1.我們選擇圓形元件（或者你可以選擇你自己喜歡的圖標、元件），復制多份。有多少個狀態（也就是我們有多少圖片），你有幾個圖片就對應多少個圖片嘛，或者你也可以選擇四個圓點，無論多少圖片，都循環回來。這里我們選擇四個圓點對應四個圖片比較清晰。
2.這里教大家一個小技巧，就是如何讓你需要的元件水平等距并排。
我們同時選中我們需要的元件，點擊菜單中的水平即可。
3.我們要給我們的圓形給個名字，方便我們查找到。建議大家有這個良好的習慣，其他元件都設置好各自的名字，特別是很多重復的元件時，更加需要設置，不然你分不清你的元件，這樣就比較頭疼了。
4.這里我們需要給圓點設置互斥，同時選中全部圓點，設置選項組。起個名字。
5.我們先設置點擊圓點跳轉圖片的交互。新建交互，單擊時，設置面板狀態
6.State選擇你要跳轉的圖片，我們第一個圓點就是第一個圖片嘛。其他圓點就是其他圖片。剩下三個圓點同樣操作。
7.接下來我們實現切換圖片就切換圓點的功能。
點擊我們的動態面板。給上面設置好的情形添加動作。情形下面的 + 號即是添加動作。
9.選擇“設置選中”
10.選擇元件，這時候我們給元件設置名字的好處了，方便我們快速選擇我們的元件，不會選錯元件。
11.給圓點元件設置“真”值，這里的意思是當我們選中到圓點的時候令他為真值。
12.其他情形同樣操作。如圖所示即可。
13.然后我們給圓點設置交互樣式，右鍵選中我們的圓點，選擇交互樣式。
14.在交互樣式里，我們選擇“選中”——“填充顏色”。其他圓點同操作。選擇你喜歡的樣式顏色。
15.進入頁面查看我們的輪播圖與小圓點的功能都實現了，但是細心的小伙伴會發現還有一個問題：進入頁面時第一個圖片的第一個圓點沒有選中。
這時候我們只需要給第一個圓點右鍵選中即可。
16.我們看看效果吧。
?（三）鼠標移入到輪播圖圖片時暫停播放，移出時恢復播放。
1.選中動態面板，新建交互。移入鼠標時。
2.設置面板狀態
3.在STATE中選擇停止播放。.
4.同樣鼠標移除時，我們再給它設置自動播放就好了。
5.我們看看效果吧。鼠標移入輪播圖就會暫停播放。 移出又會繼續播放。
總結：
? 我們使用動態面板實現輪播圖的基本功能都實現了。輪播圖作為網頁一個重要的元素，但是不難，需要我們理清思路。大家都需要熟悉掌握哦！輪播圖的使用有助于我們可以熟悉的運用交互事件。輪播圖實現了，那么Axure中的其他功能也不在話下了。加油！
總結
以上是生活随笔為你收集整理的Axure动态面板实现轮播图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 你知道单片机的工作条件吗?51单片机和5
- 下一篇： JAVA构建树状结构