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

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

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

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

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

2、實現在顯示區域展示圖234，隱藏圖1效果（右側按鈕圖標用例）。選中右側按鈕，“鼠標點擊時”-添加用例；在彈出窗口點擊“元件”下的“移動”，在最右側“配置動作”進行1234的配置，具體內容如下：

圖1的處理：

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

圖2:的處理：

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

圖3的處理：

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

圖4的處理：

選中4，下方“移動”選“經過”X設置值為-200（圖片本身的寬度+圖標占據的位置，也就是說圖4移動到圖3顯示）；左側>500;

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

確定。

3、左側按鈕圖標加用例。

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

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

以上就是axure多張圖片同區域左右滑動顯示效果的制作方法，希望大家喜歡，請繼續關注武林網。

相關推薦：

Axure圖片交互樣式有哪些?

Axure RP8怎么快速導入圖片?

Axure RP 8怎么設置點擊事件改變圖片?