Axure教程：用中繼器做圖片輪播

Axure教程：用中繼器做圖片輪播Hello，今天教大家用中繼器做圖片輪播。01為什么要用中繼器做圖片輪播開始教學(xué)之前，我們先來探討一下為什么要用中繼器來做圖片輪播。首先，市面上的圖片輪播教程都是用動態(tài)面板來做的，他是將不同的圖片放入不同的動態(tài)面板，然后通過設(shè)置動態(tài)面板的next和previous來實現(xiàn)輪播的。這樣做看是沒有問題，但是用起來非常不方便。為什么呢？第一，動態(tài)面板做的相當(dāng)于寫死了，例如你有四張輪播圖，下次想改成10張，那你就需要復(fù)制多6個頁面，在分別到各個頁面設(shè)置交互和導(dǎo)入圖片；第二，如果想改變輪播圖的尺寸，那我就要到10個頁面分別修改。這樣導(dǎo)致浪費了很多的時間，導(dǎo)致制作出來的元件復(fù)用性低。所以作者就用中繼器做了一個圖片輪播的原型，只需要在中繼器表格導(dǎo)入圖片即可自動生成交互，而且修改尺寸交互也只需要修改一次。非常的方便快捷，做好之后復(fù)用性極強(qiáng)。02原型效果預(yù)覽下面是做好的輪播圖的效果，你們也可以自行體驗哈原型演示地址：/#g=103原型教學(xué)1.所需材料中繼器×1，圖片×1，動態(tài)面板（循環(huán)面板）×1，左按鈕×1，右按鈕×1。如下圖所示擺放2.中繼器表格設(shè)置共兩列，如下圖填寫即可，設(shè)置中繼器水平布局no：圖片序號，按123456順序先寫，用于輪播的交互邏輯。picture：圖片，右鍵導(dǎo)入圖片，或者復(fù)制粘貼圖片地址。3.中繼器的交互每項加載時，設(shè)置圖片的值為item.picture中繼器載入時，添加排序按no升序排列完成后將中繼器轉(zhuǎn)為動態(tài)面板（面板1），面板1轉(zhuǎn)為動態(tài)面板（面板2）。這里要解釋一下，面板1是用來做向左向右鼠標(biāo)拖動的交互。面板2是因為中繼器不能被選中做移動的交互，所以要將其轉(zhuǎn)成動態(tài)面板。面板1的交互面板1的尺寸和圖片的尺寸一樣面板1載入時，移動面板1到-[[LVAR1.width]]，LVAR1.width代表圖片的寬，因為點向左按鈕的時候，要有一張可以做動態(tài)移動，所以需要默認(rèn)向左移動一格。面板2的交互向左拖動結(jié)束時，觸發(fā)右按鈕事件鼠標(biāo)單擊時事件。向用拖動結(jié)束時，觸發(fā)做按鈕鼠標(biāo)單擊時事件。4.左右按鈕的交互鼠標(biāo)單擊右按鈕時，我們要做一個移動的動態(tài)效果，首先簡單的講解一下思路，點擊時，先移動面板1一個圖片的距離，然后更新行，將原來第1張的圖片變成最后一張，最后一張變成倒數(shù)第二張……以此類推，最后將面板1恢復(fù)原來的位置，這樣就可以做下一次的移動。第一步，禁用該按鈕（因為如果不禁用，連續(xù)點2下就會在第一次沒移動完第二次就開始移動多了）第二步，移動面板1向左移動一個圖片的距離，即-[[LVAR1.width]]，LVAR1.width代表圖片寬度。動畫選擇線性500ms第三步，等待圖片移動結(jié)束，設(shè)置等待550ms第四步，更新中繼器，首先標(biāo)記全部行，更新全部行的序號為原本的序號-1（即TargetItem.no-1），然后在更新序號為0的行更新至最后一行，[[TargetItem.Repeater.itemCount]]第五步，移動面板1到原來的位置，即[[LVAR1.width]]。這里注意時一瞬間完成的不要設(shè)動畫。最后一步，啟用該按鈕。同理，鼠標(biāo)單擊左按鈕也是這樣做:第一步，禁用該按鈕第二步，移動面板1向有移動一個圖片的距離，即[[LVAR1.width]]，LVAR1.width代表圖片寬度。動畫選擇線性500ms第三步，等待圖片移動結(jié)束，設(shè)置等待550ms第四步，更新中繼器，首先更新最后一行[[TargetItem.Repeater.itemCount]]，更新其序號為0。然后標(biāo)記全部行，更新全部行的序號為原本的序號+1（即TargetItem.no+1）。第五步，移動面板1到原來的位置，即-[[LVAR1.width]]。這里注意時一瞬間完成的不要設(shè)動畫。最后一步，啟用該按鈕。5.制作自動輪播我們用循環(huán)動態(tài)面板制作自動輪播的效果，首先將面板添加一個state2載入時設(shè)置面板狀態(tài)為next（向后循環(huán)，間隔3000ms）狀態(tài)改變時，觸發(fā)右按鈕鼠標(biāo)單擊時事件6.整個組合的事件最后，我們把所有元件組合，做一個鼠標(biāo)移入組合時不自動輪播的效果鼠標(biāo)