Axure：圖片切換放大、縮小效果展示（下）
這篇是對上一篇文章 ofollow,noindex" target="_blank">《Axure：圖片切換放大、縮小效果展示》 的兩點改進，改進一，優化事件寫法，提高製作效率；改進二，自動播放效果。
先看下完成的效果：
step1：效率優化
1. 優化思路
不管是點選左邊按鈕抑或右邊按鈕，效果只有三種：要麼wx居中、要麼su居中、要麼co居中。那麼，是否可以只寫左邊按鈕事件，然後直接複製右邊按鈕使用呢？答案是肯定的（當然需要一點點小的改動）。
不管點選左邊按鈕還是右邊按鈕，圖片尺寸總是一大兩小，並移動三個圖片位置即可。
2. 左按鈕事件優化
注意到上一篇文章我們寫改變尺寸時，只寫了需要改變的兩個圖片大小，另一個不需要變化大小的圖片尺寸我們並未設定，在這裡，我們可以把這個本來不需要改變的圖片尺寸事件也寫上去，以左邊按鈕，判斷=wx時為例，補充後的case1事件如下：
同理，完成左邊按鈕case2、case3事件的優化，優化後的左按鈕完整事件如下：
到此，左邊按鈕事件完成。
3. 右邊按鈕事件編輯
（1）複製按鈕事件
刪除原有右邊按鈕事件，將新的左邊按鈕事件完整複製到右邊，複製後右邊按鈕事件如下（與左邊按按鈕完全一致）：
（2）右邊按鈕修改思路
- 當判斷=wx時，點選右邊按鈕後，su居中，該效果與左邊按鈕case2事件效果一致，只需要將（右邊按鈕）case2事件條件改為當判斷=wx即可；
- 當判斷=su時，點選右邊按鈕後，co居中，該效果與左邊按鈕case1事件效果一致，只需要將（右邊按鈕）case1事件條件改為當判斷=su即可；
- 當判斷=co時，點選右邊按鈕後，wx居中，該效果與左邊按鈕case3事件效果一致，只需要將（右邊按鈕）case3事件條件改為當判斷=co即可。
修改後的右邊按鈕完整事件如下：
至此，就完成了上一篇文章中的全部效果，減少寫右邊按鈕事件的時間。
step2：自動輪播效果
1. 思路分析
自動輪播是一個不停休的動作，這時候大家就應該想到用動態面板（別問我為什麼，因為動態面板有個狀態改變時事件，通過改變狀態和狀態改變時事件達到一個持續的效果），這可以參考前面一篇文章 《Axure-動態面板實現輪播圖效果圖》
事情是這樣子的，進來頁面後，圖片就開始輪播，輪播的效果應該與連續點選左邊按鈕一致（這時候就要想到直接把左邊按鈕的事件複製到那個狀態改變時了）。
2. 輪播事件設定
（1）準備動態面板元件
拖入一個空白的動態面板，設定面板有兩層狀態。
（2）動態面板載入時事件
動態面板載入時，控制動態面板狀態為next，迴圈播放（向後迴圈），迴圈時間為2000毫秒。
（3）動態面板狀態改變時事件
將左邊按鈕滑鼠單擊事件，完整複製到動態面板狀態改變時事件，事件如下圖：
至此，則完成了自動輪播效果，預覽如下：
有想要做的效果或者想知道的知識點，可以留言，如果我會，可以下次出～
作者：五月，微信公眾號：五月頻道（wuyuepd）
本文由 @五月 原創釋出於人人都是產品經理。未經許可，禁止轉載