中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語：圖片輪播是各大網(wǎng)站常常見到的形式，本文作者今天帶領(lǐng)大家坦探討進(jìn)階的輪播圖的實現(xiàn)效果，例如輪播進(jìn)度指示、快速跳轉(zhuǎn)、鼠標(biāo)移入暫停輪播等等，希望看后對你有所啟發(fā)。

準(zhǔn)備：Axure 8（或Axure 9）軟件已安裝，掌握基本的軟件使用。

本教程知識點：

1. 初級的動態(tài)面板使用；
2. 初級的頁面交互事件、元件交互事件使用：鼠標(biāo)移入移除、動態(tài)面板狀態(tài)切換；
3. 圖片元件、矩形、SVG圖標(biāo)等元件使用。

一、功能

1. 鼠標(biāo)移入暫停輪播、鼠標(biāo)移除繼續(xù)輪播；
2. 點擊切換上一張輪播圖、點擊切換下一張輪播圖；
3. 輪播圖與小標(biāo)同步、小標(biāo)點擊跳轉(zhuǎn)。

二、制作方式

以三張輪播為例，使用Axure 8為例：

進(jìn)階輪播圖主要為了適配PC端的操作，加入了指定的輪播圖頁面切換；鼠標(biāo)移動停止輪播，移出繼續(xù)輪播；手動切換上下輪播圖。

1. 制作基礎(chǔ)的輪播圖

2. 制作同等動態(tài)頁面狀態(tài)的輪播圖小標(biāo)

結(jié)合內(nèi)容輪播圖的順序給每個狀態(tài)制作進(jìn)度排序，使其輪播圖小標(biāo)的狀態(tài)與內(nèi)容輪播圖頁面一一匹配。

3. 制作左右切換的按鈕

可以通過形狀+SVG圖標(biāo)實現(xiàn)。

透明狀態(tài)實現(xiàn)：填充形狀為純色（純白：#FFFFFF），設(shè)置透明度為：30%。

4. 交互制作

1）輪播圖同步動起來

1. 內(nèi)容輪播圖頁面切換+右下部小標(biāo)切換；
2. 在頁面層級配置頁面載入的動態(tài)面版的交互（注：需要同時配置兩個動態(tài)面板交互）；
3. 選擇兩個動態(tài)面板模式：向后循環(huán)（Next）；
4. 勾選兩個動態(tài)面本向后循環(huán)（若未勾選向后循環(huán)，動態(tài)面板只會切換一個狀態(tài)）；
5. 勾選循環(huán)間隔時間（系統(tǒng)默認(rèn)1000毫秒（1秒=1000毫秒），日常中基本設(shè)置為3000–5000之間）；
6. 勾引首個狀態(tài)延時（勾選后，第一張輪播展示對應(yīng)時間后，才進(jìn)行加載第二張；若不勾選，第一張會一閃而過）；
7. 動畫：緩解動態(tài)版本切換的生硬。

動畫只需在內(nèi)容動態(tài)面板上配置，小標(biāo)動態(tài)面板無需配置；方向根據(jù)實際效果選擇（一般常用向左滑動）；動畫過渡時間，同樣是緩解切換的生硬效果。

2）設(shè)置小標(biāo)點擊后跳轉(zhuǎn)對應(yīng)的頁面

1. 每個狀態(tài)的小標(biāo)中的按鈕都需要添加交互事件；
2. 設(shè)置狀態(tài)需同步（注：點擊第一個，切換小標(biāo)為小標(biāo)1、切換內(nèi)容輪播圖為輪播圖狀態(tài)1）；

技巧：統(tǒng)一制作一個小標(biāo)狀態(tài)，然后進(jìn)行復(fù)制，復(fù)制后對應(yīng)的調(diào)整小標(biāo)內(nèi)容的排版布局，這樣就可以保證整個交互不會錯亂和丟失（如果采用每個頁面單獨制作交互，就需要注意，當(dāng)輪播圖狀態(tài)越多，制作小標(biāo)的交互需要更細(xì)心）。

3）設(shè)置左右按鈕點擊切換（以左切換為例）

1. 設(shè)置按鈕點擊事件
2. 點擊后切換內(nèi)容動態(tài)面板、小標(biāo)為上一個。
3. 向前循環(huán)：勾選向前循環(huán)（若不勾選向前循環(huán)，在動態(tài)面板切換至第一個后，將無法再次向前切換）（注：右按鈕為向后循環(huán)勾選）。
4. 注：Next（下一個）、Previous（上一個）。
5. 配置完成點擊事件后，進(jìn)行左右切換其實狀態(tài)的隱藏展示（設(shè)置隱藏狀態(tài)，只在鼠標(biāo)移入輪播圖后進(jìn)行展示切換按鈕）。

4）配置鼠標(biāo)移除輪播圖暫停、鼠標(biāo)移出輪播圖繼續(xù)

• 鼠標(biāo)移入，設(shè)置內(nèi)容輪播圖和小標(biāo)輪播圖狀態(tài)為停止循環(huán)。
• 鼠標(biāo)移入，設(shè)置左右切換按鈕為顯示。

• 鼠標(biāo)移出，設(shè)置內(nèi)容輪播圖和小標(biāo)輪播圖狀態(tài)為向后循環(huán)（配置通頁面的輪播圖動起來）。

5）隱藏左右按鈕

設(shè)置當(dāng)動態(tài)面板變化時，隱藏左右按鈕（添加觸發(fā)條件，當(dāng)指針未接觸內(nèi)容輪播圖（簡單理解為鼠標(biāo)移出內(nèi)容輪播圖）。

三、總結(jié)

1. 注意交互的先后順序，尤其在鼠標(biāo)移入移出內(nèi)容輪播圖時；
2. 遇到交互沖突，可以嘗試添加觸發(fā)條件進(jìn)行避免沖突；
3. 注意細(xì)節(jié)，尤其是小標(biāo)動態(tài)面板的交互；
4. 最后一點：老生常談，注意命名（高保真想要做的好，命名不可少）。

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

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