整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
者在本文中介紹了如何用Axure動態面板實現輪播圖效果的操作步驟，與大家分享。
一個轉換為動態面板的矩形并命名為輪播圖：
這里要記得把“自動調整為內容尺寸”勾選取消掉，方便后面調整圖片大小。
三張圖片并給圖片編號1、2、3：
三個橢圓并給橢圓對應編號1,2,3：
（1）建立三個面板并分別命名為“圖1”、“圖2”、“圖3”
（2）將三張圖分別放到三個面板下
（3）為動態面板設置第一個交互動作——載入時，使其自動輪播。
（4）看看效果
到這一步我們已經實現了輪播圖的自動輪播，但是橢圓元件還只是擺設作用，接下來讓我們為橢圓也加入交互。
（5）將三個橢圓放到一個選項組內
按住Ctrl鍵并用鼠標分別點擊三個橢圓，在“設置選項組名稱”里填入group。
這里選項組的作用是保證這三個橢圓當有一個是選中狀態時，其他兩個都將是非選中狀態。
（6）為每個橢圓設置相應的交互動作——鼠標單擊時，以及交互樣式——選中
1）橢圓1：
交互動作：
這里需要注意，因為圖1在最左邊，所以“進入動畫”是“向右滑動”。
交互樣式：
2）橢圓3：
交互動作：
圖3在最右邊，所以“進入動畫”是“向左滑動”。
交互樣式：
與橢圓1相同。
3）橢圓2：
交互動作：
因為橢圓2處于中間，所以我們需要增加判斷條件：
最終橢圓2的交互動作為：
交互樣式：
與橢圓1相同。
4）動態面板：
我們再為動態面板交互動作——載入時，增加一個橢圓1狀態為選中。
（7）再看看效果：
（8）當我們點擊了橢圓時，會發現輪播圖的自動輪播效果沒了，如果想要實現點擊橢圓后輪播圖繼續輪播只需要再在每個橢圓的交互動作后面增加動作：
到這里我們的輪播圖就完成啦！?( ‘ω’ )? get！
（1）這里我們用到了動態面板的又一種用途——輪播圖。如果想知道動態面板的另一種用途——密碼可見性切換，可以看我的另一篇文章：http://www.woshipm.com/rp/3126520.html
（2）輪播圖實現起來不難，但是主要考驗我們對于項目中每個元件的命名的嚴謹準確，否則很容易就會把橢圓對應的圖片弄混，比如點擊第一個橢圓卻跳到了第三張圖…這個項目還只是一個案例，里面的元件非常少，只有十個不到。
然而當我們制作一個較大的原型時，項目里面的元件少說也有上百個，當你從一開始沒有養成給每個元件命好名的習慣的話，后面再去梳理將會是一件非常麻煩的事情，也不便于后面查看你的項目的人的查閱。血的教訓o(╯□╰)o，所以切記從一開始就為每個添加的元件命好名！
本文由 @Nilz 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自 Unsplash ，基于 CC0 協議
者： 夢里夢中夢
轉發鏈接：https://mp.weixin.qq.com/s/6J0uJKaC4SPlt2h7oeSP-Q
一、百度一下“swiper”，進入它的中文官網。
二、調用swiper的方法有很多種，比如用npm安裝之類的，這里我們就用下載css和js庫文件來實現吧。
三、我們創建一個空白test.html文件來添加swiper。
四、開始做html部分。
五、大家知道html只是一個外表，js才是內核，于是我們加入js部分。
六、我們試著改一下輪播圖的大小，并加個顏色。
七、果然是滿寬高只有一半，可怎么劃動，只能劃到第三塊，怎么樣才能讓三回到一，循環劃動呢，加個loop:true就可以了。
八、再加個功能，讓它自動播，我不動手，讓它每秒跑到下一下張圖。
九、我們再加個分頁器，分頁器是什么東西，就是輪播下方的一個個小圓點，一點就是一頁，這里我們應該有三個點。
十、小圓點是有了，也會隨圖滾動了，可是它不能點擊啊，那好，我們加入這個就可以了點了。
十一、人家的輪播圖有左右按鈕可以控制圖片上一張下一張，我們也可以加。
十二、即然只是入門，那么到這里就可以了，更多的使用方法，大家可以去官網查一下，最后，我把圖片放進去，做出真正的輪播圖吧。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
