圖片輪播是各大網(wǎng)站常常見到的形式，文章帶我們學(xué)習(xí)了如何用Axure實(shí)現(xiàn)圖片輪播功能，一起來看看~

雙11剛過沒多久，大家是否都參加了2000+億的大項(xiàng)目呀？剁手的時(shí)候，有沒有被各大電商平臺(tái)的首頁圖片輪播吸引住了呢？是不是原本不想剁手，結(jié)果只因一個(gè)對(duì)眼就無法自拔了呢？

圖片輪播是各大電商平臺(tái)常見的套路，輪播中的每個(gè)圖片都相當(dāng)有吸引力的呀。下面呢，我們就來說說首頁圖片輪播用Axure怎么實(shí)現(xiàn)？

還是跟以往的套路一樣，下面從3個(gè)方面來展開。

01 需求分析

我們本次的需求是圖片輪播，什么是圖片輪播呢？簡單來說，就是一套圖片以一定時(shí)間間隔自動(dòng)循環(huán)播放，同時(shí)用戶也可以選擇圖片實(shí)現(xiàn)點(diǎn)播的效果。

其實(shí)再深入一點(diǎn)，我們會(huì)發(fā)現(xiàn)一張圖片的顯示與否也是有條件的。從這個(gè)角度來看，我們會(huì)想到Axure中的動(dòng)態(tài)面板。

沒錯(cuò)，今天的主角還是它。

02 Axure關(guān)鍵點(diǎn)分析

這個(gè)案例的關(guān)鍵點(diǎn)主要有3個(gè)：

1）動(dòng)態(tài)面板的不同狀態(tài)及對(duì)應(yīng)的圖片設(shè)置，這個(gè)相對(duì)比較容易

2）設(shè)置小圓點(diǎn)，實(shí)現(xiàn)點(diǎn)擊小圓點(diǎn)跳轉(zhuǎn)至對(duì)應(yīng)的圖片

所有小圓點(diǎn)需要設(shè)置為只能單個(gè)選中，這個(gè)通過設(shè)置選項(xiàng)組名稱實(shí)現(xiàn)

設(shè)置點(diǎn)擊小圓點(diǎn)的交互，如點(diǎn)擊第一個(gè)小圓點(diǎn)則顯示第一張圖片，以此類推。

3）設(shè)置動(dòng)態(tài)面板的交互效果

交互時(shí)間點(diǎn)為狀態(tài)改變時(shí)，“向后循環(huán)”需要勾選上，還可以根據(jù)實(shí)際設(shè)置間隔時(shí)間以及圖片切換的方向等

03 效果展示

我們來看一下最終效果吧，網(wǎng)址為：https://wxnac1.axshare.com/

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

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