現(xiàn)在很多app，無論是寬屏還是窄屏，為了在同一個頁面展示多點(diǎn)內(nèi)容，類似于圖片類的內(nèi)容，都可以通過在區(qū)域內(nèi)左右滑動顯示更多，既好看又可以減少跳轉(zhuǎn)，這個效果我們可以使用axure來制作，下面我們就來看看詳細(xì)的教程。

1、如圖所示，以四個圖為例。首先大家準(zhǔn)備四個寬一樣的圖片（當(dāng)然不一樣也可以，就是移動的尺寸需要根據(jù)需要計算）；

為了確定位置及效果，我在123圖的下面加了一個底，寬為600，在兩側(cè)預(yù)留20px的位置，各放置兩個15*15的圖標(biāo)，做激發(fā)操作的按鈕。

以四個圖為例，實(shí)例中的每個圖寬180px，為四個圖命名1234，并將圖123之間的間距調(diào)整為10，123為顯示，4為隱藏（屬性），圖4放置在底圖最右邊的邊緣位置；

注：為了很明確的位置，大家可如圖中一樣，通過工作窗口的邊緣拖出輔助線做幫助。

2、實(shí)現(xiàn)在顯示區(qū)域展示圖234，隱藏圖1效果（右側(cè)按鈕圖標(biāo)用例）。選中右側(cè)按鈕，“鼠標(biāo)點(diǎn)擊時”-添加用例；在彈出窗口點(diǎn)擊“元件”下的“移動”，在最右側(cè)“配置動作”進(jìn)行1234的配置，具體內(nèi)容如下：

圖1的處理：

選中1，下方“移動”選“經(jīng)過”X設(shè)置值為-200（值的算法：圖1距離底圖的左側(cè)邊緣為20，+圖片本身的寬度，由于是往左移動，所以是負(fù)數(shù)）；為了防止圖片一致移動，為每個圖片設(shè)置邊界值，圖1設(shè)置邊界值，左側(cè)>120;保證點(diǎn)擊切換按鈕的時候，圖標(biāo)不沖出底圖的顯示區(qū)域

圖2:的處理：

選中2，下方“移動”選“經(jīng)過”X設(shè)置值為-190（間距10+180,也就是說圖2移動到圖1的位置）；左側(cè)>120;

圖3的處理：

選中3，下方“移動”選“經(jīng)過”X設(shè)置值為-190（間距10+180,也就是說圖3移動到圖2的位置）；左側(cè)>310;

圖4的處理：

選中4，下方“移動”選“經(jīng)過”X設(shè)置值為-200（圖片本身的寬度+圖標(biāo)占據(jù)的位置，也就是說圖4移動到圖3顯示）；左側(cè)>500;

隱藏顯示的設(shè)置：同用例（case1）下，元件-顯示/隱藏，圖1設(shè)置為隱藏，圖4設(shè)置為顯示；

確定。

3、左側(cè)按鈕圖標(biāo)加用例。

將步驟2中的移動中的“-”去掉，圖1設(shè)置為顯示，圖4設(shè)置為隱藏。其他不用動。提交即可。邊界值按照1234，依次為：120,310,500,700

4、多個圖片的設(shè)置方法類似，依次類推。

以上就是axure多張圖片同區(qū)域左右滑動顯示效果的制作方法，希望大家喜歡，請繼續(xù)關(guān)注武林網(wǎng)。

相關(guān)推薦：

Axure圖片交互樣式有哪些?

Axure RP8怎么快速導(dǎo)入圖片?

Axure RP 8怎么設(shè)置點(diǎn)擊事件改變圖片?