很多小夥伴在瀏覽壹些網站的時候，通常在網站首頁裏都會看到有輪播圖！而我們使用Axure制作這樣的輪播圖效果的時候，應該怎麽操作呢？下面就來教大家怎麽操作吧~零基礎小白想要自學Axure做產品原型，那麽專業教學就可以事半功倍！選擇的Axure自學視頻課，就能夠在最短的時間獲取到最全面的Axure知識~感興趣就就進~
Axure中繼器制作圖片輪播效果教程：
1.所需材料中繼器×1，圖片×1，動態面板（循環面板）×1，左按鈕×1，右按鈕×1。如下圖所示擺放2.中繼器表格設置***兩列，如下圖填寫即可，設置中繼器水平布局no：圖片序號，按123456順序先寫，用於輪播的交互邏輯。
picture：圖片，右鍵導入圖片，或者復制粘貼圖片地址。
3.中繼器的交互每項加載時，設置圖片的值為item.picture中繼器載入時，添加排序按no升序排列完成後將中繼器轉為動態面板（面板1），面板1轉為動態面板（面板2）。這裏要解釋壹下，面板1是用來做向左向右鼠標拖動的交互。面板2是因為中繼器不能被選中做移動的交互，所以要將其轉成動態面板。面板1的交互面板1的尺寸和圖片的尺寸壹樣面板1載入時，移動面板1到-[[LVAR1.width]]，LVAR1.width代表圖片的寬，因為點向左按鈕的時候，要有壹張可以做動態移動，所以需要默認向左移動壹格。面板2的交互向左拖動結束時，觸發右按鈕事件鼠標單擊時事件。向用拖動結束時，觸發做按鈕鼠標單擊時事件。4.左右按鈕的交互鼠標單擊右按鈕時，我們要做壹個移動的動態效果，首先簡單的講解壹下思路，點擊時，先移動面板1壹個圖片的距離，然後更新行，將原來第1張的圖片變成最後壹張，最後壹張變成倒數第二張以此類推，最後將面板1恢復原來的位置，這樣就可以做下壹次的移動。第壹步，禁用該按鈕（因為如果不禁用，連續點2下就會在第壹次沒移動完第二次就開始移動多了）第二步，移動面板1向左移動壹個圖片的距離，即-[[LVAR1.width]]，LVAR1.width代表圖片寬度。動畫選擇線性500ms第三步，等待圖片移動結束，設置等待550ms第四步，更新中繼器，首先標記全部行，更新全部行的序號為原本的序號-1（即TargetItem.no-1），然後在更新序號為0的行更新至最後壹行，[[TargetItem.Repeater.itemCount]]第五步，移動面板1到原來的位置，即[[LVAR1.width]]。這裏註意時壹瞬間完成的不要設動畫。最後壹步，啟用該按鈕。同理，鼠標單擊左按鈕也是這樣做:第壹步，禁用該按鈕第二步，移動面板1向有移動壹個圖片的距離，即[[LVAR1.width]]，LVAR1.width代表圖片寬度。動畫選擇線性500ms第三步，等待圖片移動結束，設置等待550ms第四步，更新中繼器，首先更新最後壹行[[TargetItem.Repeater.itemCount]]，更新其序號為0。然後標記全部行，更新全部行的序號為原本的序號+1（即TargetItem.no+1）。第五步，移動面板1到原來的位置，即-[[LVAR1.width]]。這裏註意時壹瞬間完成的不要設動畫。最後壹步，啟用該按鈕。5.制作自動輪播我們用循環動態面板制作自動輪播的效果，首先將面板添加壹個state2載入時設置面板狀態為next（向後循環，間隔3000ms）狀態改變時，觸發右按鈕鼠標單擊時事件6.整個組合的事件最後，我們把所有元件組合，做壹個鼠標移入組合時不自動輪播的效果鼠標移入時，顯示左右按鈕，設置循環動態面板的狀態為停止循環鼠標移出時，隱藏左右按鈕，設置循環動態面板的狀態為next（向後循環，間隔3000ms）最終效果：以上就是關於“Axure中繼器怎麽制作圖片輪播效果？”的全部內容分享了，希望能夠幫助到妳~更多Axure技巧學習，盡在！Axure相關文章、Axure相關問答、Axure專業自學視頻課都是妳學習提升的好幫手~想要快速有效的學習掌握Axure，那麽Axure視頻課就真的千萬不要錯過了！專業講師、全面知識點、從0到1逐漸掌握~下面為各位小夥伴推薦幾套Axure相對熱門的基礎課：