中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)讀：本文跟大家分享如何用Axure中繼器做圖片輪播效果，作者從預(yù)覽圖，到所需原件，再到操作步驟都一一展開了分析，并對過程中需要注意的問題進(jìn)行了介紹，希望對你有所啟發(fā)。

Hello，今天教大家用中繼器做圖片輪播。

01 為什么要用中繼器做圖片輪播

開始教學(xué)之前，我們先來探討一下為什么要用中繼器來做圖片輪播。

首先，市面上的圖片輪播教程都是用動(dòng)態(tài)面板來做的，他是將不同的圖片放入不同的動(dòng)態(tài)面板，然后通過設(shè)置動(dòng)態(tài)面板的next和previous來實(shí)現(xiàn)輪播的。這樣做看是沒有問題，但是用起來非常不方便。為什么呢？第一，動(dòng)態(tài)面板做的相當(dāng)于寫死了，例如你有四張輪播圖，下次想改成10張，那你就需要復(fù)制多6個(gè)頁面，在分別到各個(gè)頁面設(shè)置交互和導(dǎo)入圖片；第二，如果想改變輪播圖的尺寸，那我就要到10個(gè)頁面分別修改。這樣導(dǎo)致浪費(fèi)了很多的時(shí)間，導(dǎo)致制作出來的元件復(fù)用性低。

所以作者就用中繼器做了一個(gè)圖片輪播的原型，只需要在中繼器表格導(dǎo)入圖片即可自動(dòng)生成交互，而且修改尺寸交互也只需要修改一次。非常的方便快捷，做好之后復(fù)用性極強(qiáng)。

02 原型效果預(yù)覽

下面是做好的輪播圖的效果，你們也可以自行體驗(yàn)哈

原型演示地址：https://cspfgk.axshare.com/#g=1

03 原型教學(xué)

1. 所需材料

中繼器×1，圖片×1，動(dòng)態(tài)面板（循環(huán)面板）×1，左按鈕×1，右按鈕×1。

如下圖所示擺放

2. 中繼器表格設(shè)置

共兩列，如下圖填寫即可，設(shè)置中繼器水平布局

• no：圖片序號，按123456順序先寫，用于輪播的交互邏輯。
• picture：圖片，右鍵導(dǎo)入圖片，或者復(fù)制粘貼圖片地址。

3. 中繼器的交互

每項(xiàng)加載時(shí)，設(shè)置圖片的值為item.picture

中繼器載入時(shí)，添加排序按no升序排列

完成后將中繼器轉(zhuǎn)為動(dòng)態(tài)面板（面板1），面板1轉(zhuǎn)為動(dòng)態(tài)面板（面板2）。這里要解釋一下，面板1是用來做向左向右鼠標(biāo)拖動(dòng)的交互。面板2是因?yàn)橹欣^器不能被選中做移動(dòng)的交互，所以要將其轉(zhuǎn)成動(dòng)態(tài)面板。

面板1的交互

面板1的尺寸和圖片的尺寸一樣

面板1載入時(shí)，移動(dòng)面板1到-[[LVAR1.width]]，LVAR1.width代表圖片的寬，因?yàn)辄c(diǎn)向左按鈕的時(shí)候，要有一張可以做動(dòng)態(tài)移動(dòng)，所以需要默認(rèn)向左移動(dòng)一格。

面板2的交互

向左拖動(dòng)結(jié)束時(shí)，觸發(fā)右按鈕事件鼠標(biāo)單擊時(shí)事件。

向用拖動(dòng)結(jié)束時(shí)，觸發(fā)做按鈕鼠標(biāo)單擊時(shí)事件。

4. 左右按鈕的交互

鼠標(biāo)單擊右按鈕時(shí)，我們要做一個(gè)移動(dòng)的動(dòng)態(tài)效果，首先簡單的講解一下思路，點(diǎn)擊時(shí)，先移動(dòng)面板1一個(gè)圖片的距離，然后更新行，將原來第1張的圖片變成最后一張，最后一張變成倒數(shù)第二張……以此類推，最后將面板1恢復(fù)原來的位置，這樣就可以做下一次的移動(dòng)。

第一步，禁用該按鈕（因?yàn)槿绻唤?，連續(xù)點(diǎn)2下就會(huì)在第一次沒移動(dòng)完第二次就開始移動(dòng)多了）

第二步，移動(dòng)面板1向左移動(dòng)一個(gè)圖片的距離，即-[[LVAR1.width]]，LVAR1.width代表圖片寬度。動(dòng)畫選擇線性500ms

第三步，等待圖片移動(dòng)結(jié)束，設(shè)置等待550ms

第四步，更新中繼器，首先標(biāo)記全部行，更新全部行的序號為原本的序號-1（即TargetItem.no-1），然后在更新序號為0的行更新至最后一行，[[TargetItem.Repeater.itemCount]]

第五步，移動(dòng)面板1到原來的位置，即[[LVAR1.width]]。這里注意時(shí)一瞬間完成的不要設(shè)動(dòng)畫。

最后一步，啟用該按鈕。

同理，鼠標(biāo)單擊左按鈕也是這樣做:

第一步，禁用該按鈕

第二步，移動(dòng)面板1向有移動(dòng)一個(gè)圖片的距離，即[[LVAR1.width]]，LVAR1.width代表圖片寬度。動(dòng)畫選擇線性500ms

第三步，等待圖片移動(dòng)結(jié)束，設(shè)置等待550ms

第四步，更新中繼器，首先更新最后一行[[TargetItem.Repeater.itemCount]]，更新其序號為0。然后標(biāo)記全部行，更新全部行的序號為原本的序號+1（即TargetItem.no+1）。

第五步，移動(dòng)面板1到原來的位置，即-[[LVAR1.width]]。這里注意時(shí)一瞬間完成的不要設(shè)動(dòng)畫。

最后一步，啟用該按鈕。

5. 制作自動(dòng)輪播

我們用循環(huán)動(dòng)態(tài)面板制作自動(dòng)輪播的效果，首先將面板添加一個(gè)state2

載入時(shí)設(shè)置面板狀態(tài)為next（向后循環(huán)，間隔3000ms）

狀態(tài)改變時(shí)，觸發(fā)右按鈕鼠標(biāo)單擊時(shí)事件

6. 整個(gè)組合的事件

最后，我們把所有元件組合，做一個(gè)鼠標(biāo)移入組合時(shí)不自動(dòng)輪播的效果

鼠標(biāo)移入時(shí)，顯示左右按鈕，設(shè)置循環(huán)動(dòng)態(tài)面板的狀態(tài)為停止循環(huán)

鼠標(biāo)移出時(shí)，隱藏左右按鈕，設(shè)置循環(huán)動(dòng)態(tài)面板的狀態(tài)為next（向后循環(huán)，間隔3000ms）

以上就是本期分享的全部內(nèi)容，謝謝閱讀。

本文由 @做產(chǎn)品但不是經(jīng)理 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。