一般我們?cè)诠涮詫毜臅r(shí)候馒闷，首頁(yè)會(huì)有很多圖片來(lái)回播放架馋，那就是輪播圖帅刊，如果我們想要實(shí)現(xiàn)這個(gè)效果難不難？當(dāng)然不難陈症，Axure（http://www.axurechina.cc/）就可以幫助你蔼水。Axure是一款強(qiáng)大的原型設(shè)計(jì)軟件，而且不需要你懂編碼你就可以制作高逼真的網(wǎng)頁(yè)模型录肯。
1. 首先繪制一個(gè)總位置線框圖趴腋，如下圖所示，使3個(gè)banner旋轉(zhuǎn)效果
2.banner位置占位符轉(zhuǎn)換為動(dòng)態(tài)面板(鼠標(biāo)右鍵,轉(zhuǎn)換的動(dòng)態(tài)面板),,在右邊的面板區(qū)域找到動(dòng)態(tài)面板(橫幅在主頁(yè)的圖),選擇论咏、添加2個(gè),分別banner2 banner3优炬。
雙擊狀態(tài)名進(jìn)入相應(yīng)的面板頁(yè)面，您將看到一個(gè)藍(lán)色框潘靖。盒子里面的零件會(huì)顯示在面板上穿剖，盒子外面的零件不會(huì)顯示。您可以更改州名(選擇州名卦溢，然后單擊州名進(jìn)行修改糊余，圖中的州名更改為1,2,3，對(duì)應(yīng)于哪個(gè)banner)
3.添加banner輪播時(shí)单寂，banner上面的狀態(tài)按鈕（圖中的圓點(diǎn)贬芥，會(huì)跟隨banner切換，顏色變化）宣决，添加矩形部件蘸劈，右鍵選擇形狀，然后選擇橢圓尊沸，然后在工具欄里修改橢圓的寬和高威沫，變成一個(gè)圓（w：10，h：10）洼专，復(fù)制部件2次棒掠，在右側(cè)部件名稱和注釋處給3個(gè)圓點(diǎn)分別命名圓點(diǎn)1，2屁商，3
1. 準(zhǔn)備工作差不多完成了烟很，現(xiàn)在開(kāi)始動(dòng)態(tài)搭配效果。首先是banner要設(shè)置成自動(dòng)輪播的蜡镶。這要腫么設(shè)置呢雾袱？先給面板加動(dòng)態(tài)效果：選中面板，在右側(cè)交互欄的“顯示”一項(xiàng)下添加用例官还，雜項(xiàng)里選擇等待2秒（用來(lái)展示banner芹橡，時(shí)間長(zhǎng)短自行設(shè)置），然后在動(dòng)態(tài)面板下選擇”設(shè)置面板狀態(tài)“望伦，選擇狀態(tài)“下一步”僻族，設(shè)置進(jìn)入退出動(dòng)畫(huà)“向左滑動(dòng)”粘驰，動(dòng)作時(shí)間設(shè)置為500毫秒。重復(fù)“等待”述么，”設(shè)置面板狀態(tài)”兩次蝌数。
注意：banner輪播到第三張時(shí)，下一張連接第一張banner度秘，在設(shè)置面板狀態(tài)時(shí)顶伞，勾選”從最后一個(gè)到第一個(gè)自動(dòng)跳轉(zhuǎn)“，這樣才能實(shí)現(xiàn)banner1剑梳，2唆貌，3，1垢乙，2锨咙，3這樣的輪播順序。
Axure添加交互
2. 做到這里追逮，在瀏覽器里預(yù)覽酪刀，要讓banner動(dòng)，得有個(gè)觸發(fā)條件钮孵，首先將banner動(dòng)態(tài)面板設(shè)置為不可見(jiàn)（選中動(dòng)態(tài)面板右鍵骂倘，設(shè)為不可見(jiàn)），然后在”頁(yè)面交互“中設(shè)置當(dāng)頁(yè)面載入是巴席，添加用例历涝，顯示動(dòng)態(tài)面板
3.banner上的狀態(tài)圓點(diǎn)沒(méi)有發(fā)生變化，都是一樣的狀態(tài)漾唉，現(xiàn)在來(lái)修改這3個(gè)圓點(diǎn)荧库，讓3個(gè)圓點(diǎn)對(duì)應(yīng)各自的banner。給3個(gè)圓點(diǎn)添加交互樣式（選中圓點(diǎn)赵刑，右鍵添加交互樣式）电爹，在”選中”下設(shè)置圓點(diǎn)樣式，選擇填充個(gè)顏色（紅色料睛，自行設(shè)置），3個(gè)圓點(diǎn)同理設(shè)置摇邦。
5. 然后將圓點(diǎn)的效果和動(dòng)態(tài)面板聯(lián)系起來(lái)恤煞，在動(dòng)態(tài)面板“顯示”一項(xiàng)的用例里繼續(xù)添加內(nèi)容，部件里選擇“設(shè)置選擇/選中”施籍，banner1顯示時(shí)居扒，選中圓點(diǎn)1（選定狀態(tài)值：true），圓點(diǎn)2和3為未選中狀態(tài)（選定狀態(tài)值：false）丑慎，以此類推設(shè)置即可喜喂。
注意：用例是一項(xiàng)一項(xiàng)執(zhí)行瓤摧，不要把圓點(diǎn)的狀態(tài)放錯(cuò)位置喲~圓點(diǎn)狀態(tài)要和對(duì)應(yīng)的banner狀態(tài)一致哦~
6. 全部制作完成，點(diǎn)擊預(yù)覽玉吁。
以上內(nèi)容就是關(guān)于Axure動(dòng)態(tài)面板實(shí)現(xiàn)banner的輪播效果照弥，更多教程，可以關(guān)注Axure（http://www.axurechina.cc/）中文網(wǎng)进副。
本篇文章來(lái)源于：http://www.axurechina.cc/news/1499.html
