Axure入門案例系列 -- 進階輪播圖

上一篇文章給大家介紹了基礎的輪播制作瘦真，適合于大部分绰播，今天小編帶領大家實現(xiàn)進階的輪播圖實現(xiàn)效果花枫。例如輪播進度指示刻盐、快速跳轉(zhuǎn)、鼠標移入暫停輪播等等

以三張輪播為例，使用Axure 8為例威彰。

進階輪播圖主要為了適配PC端的操作出牧，加入了指定的輪播圖頁面切換；鼠標移動停止輪播歇盼，移出繼續(xù)輪播舔痕；手動切換上下輪播圖。

1豹缀、制作基礎的輪播圖（詳細教程可查看上一篇文章：文章地址赵讯。）

2、制作同等動態(tài)頁面狀態(tài)的輪播圖小標耿眉，結(jié)合內(nèi)容輪播圖的順序給每個狀態(tài)制作進度排序边翼，使其輪播圖小標的狀態(tài)與內(nèi)容輪播圖頁面一一匹配。

樣式

3鸣剪、制作左右切換的按鈕组底。

左右按鈕位置

透明度調(diào)節(jié)

4江滨、交互制作

設置小標點擊后跳轉(zhuǎn)對應的頁面。
每個狀態(tài)的小標中的按鈕都需要添加交互事件溺忧。
設置狀態(tài)需同步（注：點擊第一個咏连，切換小標為小標1、切換內(nèi)容輪播圖為輪播圖狀態(tài)1）鲁森。
技巧：統(tǒng)一制作一個小標狀態(tài)祟滴，然后進行復制，復制后對應的調(diào)整小標內(nèi)容的排版布局歌溉，這樣就可以保證整個交互不會錯亂和丟失垄懂。（如果采用每個頁面單獨制作交互，就需要注意痛垛，當輪播圖狀態(tài)越多草慧，制作小標的交互需要更細心。）

設置左右按鈕點擊切換（以左切換為例）匙头。
設置按鈕點擊事件
點擊后切換內(nèi)容動態(tài)面板漫谷、小標為上一個。
向前循環(huán)：勾選向前循環(huán)（若不勾選向前循環(huán)蹂析，在動態(tài)面板切換至第一個后舔示，將無法再次向前切換）碟婆。（注：右按鈕為向后循環(huán)勾選）。
注：Next（下一個）惕稻、Previous（上一個）竖共。
配置完成點擊事件后，進行左右切換其實狀態(tài)的隱藏展示（設置隱藏狀態(tài)俺祠，只在鼠標移入輪播圖后進行展示切換按鈕）公给。

image.png

負坐標網(wǎng)出品燕偶。
負坐標網(wǎng)是一個擁有高質(zhì)量原型模版、組件庫的交易平臺础嫡。
網(wǎng)址：www.fuzuobiao.com