Axure動態面板實現banner的輪播效果
一般我們在逛淘寶的時候，首頁會有很多圖片來回播放，那就是輪播圖，如果我們想要實現這個效果難不難？當然不難，Axure（http://www.axurechina.cc/）就可以幫助你。Axure是一款強大的原型設計軟體，而且不需要你懂編碼你就可以製作高逼真的網頁模型。
- 首先繪製一個總位置線框圖，如下圖所示，使3個banner旋轉效果
2.banner位置佔位符轉換為動態面板(滑鼠右鍵,轉換的動態面板),在右邊的面板區域找到動態面板(橫幅在主頁的圖),選擇、新增2個,分別banner2 banner3。
雙擊狀態名進入相應的面板頁面，您將看到一個藍色框。盒子裡面的零件會顯示在面板上，盒子外面的零件不會顯示。您可以更改州名(選擇州名，然後單擊州名進行修改，圖中的州名更改為1,2,3，對應於哪個banner)
3.新增banner輪播時，banner上面的狀態按鈕（圖中的圓點，會跟隨banner切換，顏色變化），新增矩形部件，右鍵選擇形狀，然後選擇橢圓，然後在工具欄裡修改橢圓的寬和高，變成一個圓（w：10，h：10），複製部件2次，在右側部件名稱和註釋處給3個圓點分別命名圓點1，2，3
- 準備工作差不多完成了，現在開始動態搭配效果。首先是banner要設定成自動輪播的。這要腫麼設定呢？先給面板加動態效果：選中面板，在右側互動欄的“顯示”一項下新增用例，雜項裡選擇等待2秒（用來展示banner，時間長短自行設定），然後在動態面板下選擇”設定面板狀態“，選擇狀態“下一步”，設定進入退出動畫“向左滑動”，動作時間設定為500毫秒。重複“等待”，”設定面板狀態”兩次。
注意：banner輪播到第三張時，下一張連線第一張banner，在設定面板狀態時，勾選”從最後一個到第一個自動跳轉“，這樣才能實現banner1，2，3，1，2，3這樣的輪播順序。
Axure新增互動
- 做到這裡，在瀏覽器裡預覽，要讓banner動，得有個觸發條件，首先將banner動態面板設定為不可見（選中動態面板右鍵，設為不可見），然後在”頁面互動“中設定當頁面載入是，新增用例，顯示動態面板
3.banner上的狀態圓點沒有發生變化，都是一樣的狀態，現在來修改這3個圓點，讓3個圓點對應各自的banner。給3個圓點新增互動樣式（選中圓點，右鍵新增互動樣式），在”選中”下設定圓點樣式，選擇填充個顏色（紅色，自行設定），3個圓點同理設定。
- 然後將圓點的效果和動態面板聯絡起來，在動態面板“顯示”一項的用例裡繼續新增內容，部件裡選擇“設定選擇/選中”，banner1顯示時，選中圓點1（選定狀態值：true），圓點2和3為未選中狀態（選定狀態值：false），以此類推設定即可。
注意：用例是一項一項執行，不要把圓點的狀態放錯位置喲圓點狀態要和對應的banner狀態一致哦
- 全部製作完成，點選預覽。
以上內容就是關於Axure動態面板實現banner的輪播效果，更多教程，可以關注Axure（http://www.axurechina.cc/）中文網。
本篇文章來源於：http://www.axurechina.cc/news/1499.html