大家好，很高興又和你見面了，感謝你能經常過來支持秦蕊，這次我們就來聊聊輪播圖怎么制作,輪播圖制作教程，以及其他關于輪播圖的一些相關干貨，這篇文章對新手朋友來說是比較重要的，因為涉及到各個方面，閱讀完你一定能有所收獲！
很多電商、知識付費、運動類產品的首頁位置都會通過輪播圖的方式來展示重點推薦的內容，方便用戶最快觸達信息，對產品數據增長起到重要作用，接下來講解下如何使用Axure呈現該原型。
先看效果：
我們先對整個流程進行思路梳理：
1
拖入一個動態面板部件，并命名為“background”。
雙擊動態面板，增加兩個狀態，并分別命名“圖1” “圖2” “圖3”。
拖入一個矩形元件，調整尺寸為W：10 H：2 ，命名為“block1”，并復制兩個，分別命名為“block2” “block3”，并設置交互樣式為選中時“填充顏色”為白色。
此處要注意要將三個矩形同時選中并設置“選項組名稱”，選項組的作用是，同一個選項組部件，當其中一個部件被選中時，其它部件會自動取消選中狀態。
分別進入動態面板background里的三個狀態，在每個狀態中拖入一個占位符并放入指定位置，占位符中標記好相應的圖片1，圖片2，圖片3。
在這里我用的是“占位符”，在實際制作中可以直接拖入圖片元件就行。
以上是準備工作部分，圖中的帶殼手機外框是另外準備的元件庫，有需要的可以在我公眾號獲取。
2
第二部分對準備好的部件添加交互用例。
為“background”動態面板添加「狀態改變時」用例，首先需要添加一個條件判斷。
當動態面板的狀態為「圖1」時，設置選中狀態為「block1」。
和“圖1”狀態一樣，再添加2個條件判斷后選中的狀態，如圖：
為“background”狀態面版添加「載入時」用例，添加第一個動作為「選中時」選擇「block1」；添加第二個動作「設置面板狀態」，選擇狀態「Next」并勾選“向后循環”“循環間隔”，設置動畫模式，調整秒數。（秒數可按不同情況配置）
到此，就能實現文章開頭第一個動畫中的自動輪播效果，但還不能實現手勢拖拽的效果。
3
接下來我們制作手勢拖動時的交互效果。
分別進入動態面板“background”下的三個狀態，并把狀態內的所有內容全選后右鍵“轉化為動態面板”，將新轉化到的動態面板分別命名為“drag1”“dara2”“drag3”。
分別為三個動態面板添加拖動時的用例動作，具體如下圖：
以上就是所有的步驟，最終效果就是文章開頭中所示的樣子，在這個過程中，有三個技巧點，一個是狀態面板的循環效果，二是對應不同狀態，動態面板可以與部件進行聯動，三是對于動態面板內部的狀態可以再次轉化成動態面板，用作拖拽手勢的連接件。
這篇文章的所有內容到這里就完了，希望能幫到大家，輪播圖怎么制作「秒懂：輪播圖制作教程」這篇文章你覺得還不錯的話，可以幫忙點個贊哦！心情不好的時候別忘了來巢座耶學習網看看哦！
本文發布者：百事通，不代表巢座耶立場，轉載請注明出處：http://www.sdwldmy.com/p/14067.html
版權聲明：本文內容由互聯網用戶自發貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容， 請發送郵件至 jubao226688#126.com 舉報，一經查實，本站將立刻刪除。
