淘寶輪播圖自動滾動效果怎么做Axure教程

淘寶輪播圖自動滾動效果怎么做（Axure教程）

作為產品經理必備神器之一，axure相信每個人都用過。這篇文章帶大家了解下淘寶輪播圖效果的制作與效果的實現。

效果如下：

產品人員思路很為重要，所以動手之前我們先理理思路，我們先羅列出淘寶輪播圖需要實現的效果：

圖片向左滑動輪播，間隔4s，滑動動畫500ms；

下方焦點，點擊切換到相應的圖片；

左右切換按鈕，鼠標放入輪播圖顯示，懸置在按鈕上顏色加深。

好了，基本效果已經羅列出來，下一步就是開始動手制作。我們可以一步一步來，先實現一步，再實現下一步，避免思緒混亂。

一，實現圖片輪播以及自動滾動效果

動態面板是axure里面一個非常重要的原件，很多效果都是通過動態面板實現的，今天我們的輪播圖也要用到動態面板。

首先預備好素材。先從淘寶上復制輪播圖片下來，右擊輪播圖，點擊復制圖片。

打開axure，粘貼剛才的圖片，將圖片轉換為動態面板。

現在我們就可以axure右下角看到剛才的圖片已經轉化成為動態面板了，我們點擊復制狀態，復制三次，并且把淘寶輪播圖剩下幾張復制粘貼進去。

現在我們可以看到圖片已經在里面了，基礎的結構已經有了，接下來就是實現效果了。

實現自動輪播效果。我們點擊動態面板，設置載入時自動切換，間隔4000ms，切換動畫左滑，動畫時長500ms。

好了，第一步大功告成，效果已經可以實現了，接下來看第二步。

二，實現下方焦點效果

先做個好樣式。拖出幾個圓圈設置大小11*11，背景白色，間隔10px，設置選項組名稱“輪播焦點”，設置選中時顏色FF5000。命名分別設置為“焦點-1”、“焦點-2”、“焦點-3”、“焦點-4”。

下方設置一個矩形，大小80*19，白色背景不透明度30%。

好了，樣式已經完成了，接下來就是效果了。

實現到圖片選中對應的焦點。點擊動態面板，設置狀態改變事件，記得設置條件判定，每次動態面板為第一頁時選中“焦點-1”，其余幾個相同。

現在我們已經實現了輪播圖滾動自動點亮焦點。

實現點擊焦點切換輪播圖。我們點擊“焦點-1”設置點擊事件，點擊切換到動態面板第一頁。效果逐漸，時間500ms。

之后設置繼續向左滾動（同載入事件）。

好了我們的焦點部分已經完成了。

三、向左、向右按鈕效果的實現

首先實現基礎樣式，先做兩個樣式在輪播圖左右兩邊，不透明度30%，設置交互事件，選中時不透明50%。

隱藏兩個元件，設置鼠標移入選中元件，鼠標移出取消選中。

鼠標移入移出顯示隱藏左右按鈕效果。將兩個元件與動態面板和下方的焦點組合，設置鼠標移入組合事件，顯示兩個元件，鼠標移出組合時隱藏兩個元件。

現在已經實現大部分效果了，就差點擊切換輪播圖就可以大功告成了。

點擊切換輪播圖，設置左鍵點擊事件，輪播圖切換到上一張，動畫效果向右滑動，然后設置繼續滾動（與載入事件同）。

同樣的，右鍵點擊事件也是一樣，輪播圖切換到下一張，動畫效果左滑，然后設置繼續滾動（與載入事件同）。

好了，到這里已經大功告成了，按下f5就可以預覽了。