淘寶輪播圖自動(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)到圖片選中對應(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ù)覽了。