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

效果如下：

產(chǎn)品人員思路最為重要，所以動手之前我們先理理思路，我們先羅列出淘寶輪播圖需要實現(xiàn)的效果：

1. 圖片向左滑動輪播，間隔4s，滑動動畫500ms；
2. 下方焦點，點擊切換到相應(yīng)的圖片；
3. 左右切換按鈕，鼠標(biāo)放入輪播圖顯示，懸置在按鈕上顏色加深。

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

一，實現(xiàn)圖片輪播以及自動滾動效果

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

首先準(zhǔn)備好素材。先從淘寶上復(fù)制輪播圖片下來，右擊輪播圖，點擊復(fù)制圖片。

打開axure，粘貼剛才的圖片，將圖片轉(zhuǎn)換為動態(tài)面板。

現(xiàn)在我們就可以axure右下角看到剛才的圖片已經(jīng)轉(zhuǎn)化成為動態(tài)面板了，我們點擊復(fù)制狀態(tài)，復(fù)制三次，并且把淘寶輪播圖剩下幾張復(fù)制粘貼進去。

現(xiàn)在我們可以看到圖片已經(jīng)在里面了，基礎(chǔ)的結(jié)構(gòu)已經(jīng)有了，接下來就是實現(xiàn)效果了。

實現(xiàn)自動輪播效果。我們點擊動態(tài)面板，設(shè)置載入時自動切換，間隔4000ms，切換動畫左滑，動畫時長500ms。

好了，第一步大功告成，效果已經(jīng)可以實現(xiàn)了，接下來看第二步。

二，實現(xiàn)下方焦點效果

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

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

好了，樣式已經(jīng)完成了，接下來就是效果了。

實現(xiàn)到圖片選中對應(yīng)的焦點。點擊動態(tài)面板，設(shè)置狀態(tài)改變事件，記得設(shè)置條件判斷，每次動態(tài)面板為第一頁時選中“焦點-1”，其余幾個相同。

現(xiàn)在我們已經(jīng)實現(xiàn)了輪播圖滾動自動點亮焦點。

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

之后設(shè)置繼續(xù)向左滾動（同載入事件）。

好了我們的焦點部分已經(jīng)完成了。

三、向左、向右按鈕效果的實現(xiàn)

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

隱藏兩個元件，設(shè)置鼠標(biāo)移入選中元件，鼠標(biāo)移出取消選中。

鼠標(biāo)移入移出顯示隱藏左右按鈕效果。將兩個元件與動態(tài)面板和下方的焦點組合，設(shè)置鼠標(biāo)移入組合事件，顯示兩個元件，鼠標(biāo)移出組合時隱藏兩個元件。

現(xiàn)在已經(jīng)實現(xiàn)大部分效果了，就差點擊切換輪播圖就可以大功告成了。

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

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

好了，到這里已經(jīng)大功告成了，按下f5就可以預(yù)覽了。

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

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