淘寶輪播圖自動(dòng)滾動(dòng)效果怎么做Axure教程

淘寶輪播圖自動(dòng)滾動(dòng)效果怎么做（Axure教程）

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

效果如下：

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

圖片向左滑動(dòng)輪播，間隔4s，滑動(dòng)動(dòng)畫500ms；

下方焦點(diǎn)，點(diǎn)擊切換到相應(yīng)的圖片；

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

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

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

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

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

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

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

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

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

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

二，實(shí)現(xiàn)下方焦點(diǎn)效果

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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