圖片輪播尺寸(淘寶店鋪圖片輪播尺寸)

很多朋友想了解關於圖片輪播尺寸的一些資料信息A292;下Ɩ29;是(揚升資訊www.balincan8.com1;小編整理的與圖片輪播尺寸相關的內容分享給大家A292;一起來看看吧。

很多電商、知識付費、運動類產品的首頁位置都會通過輪播圖的方式來展示重點推薦的內容A292;方便用戶最快觸達信息A292;對產品數據增長起到重要作用A292;接下來講解下如何使用Axure呈現該原型。

先看效果A306;

我們先對整個流程進行思路梳理A306;

1

拖入一個動態Ɩ29;板部件A292;並命名為220;back 3;round221;
2290;

雙擊動態麵板，增加兩個狀態，並分別命名“圖1” “圖2” “圖3”。

拖入一個矩形元件，調整尺寸為W：10 H：2 ，命名為“block1”，並複製兩個，分別命名為“block2” “block3”，並設置交互樣式為選中時“填充顏色”為白色。

此處要注意要將三個矩形同時選中並設置220;選項組名稱221;A292;選項組的作用是A292;同一個選項組部件A292;當其中一個部件被選中時A292;其它部件會自動取消選中狀態
2290;

分別進入動態麵板background裏的三個狀態，在每個狀態中拖入一個占位符並放入指定位置，占位符中標記好相應的圖片1，圖片2，圖片3。

在這裏我用的是220;占位符221;A292;在實際製作中可以直接拖入圖片元件就行
2290;

以上是準備工作部分A292;圖中的帶殼手機外框是另外準備的元件庫A292;有需要的可以在我公眾號獲取
2290;

2

第二部分3565;310;Î33;好的部件添加É32;互用363;。

為“back 3;round”動態麵板添加300;376;態ਟ3;變時301;用363;，首先需要添加一個條件判Ą39;。

當動態麵板的狀態為「圖1」時，設置選中狀態為「block1」。

和“圖1”狀態一樣，再添加2個條件判斷後選中的狀態，如圖：

為“background”狀態麵版添加「載入時」用例，添加第一個動作為「選中時」選擇「block1」；添加第二個動作「設置麵板狀態」，選擇狀態「Next」並勾選“向後循環”“循環間隔”，設置動畫模式，調整秒數。（秒數可按不同情況配置）

到此，3601;能3526;現文章開頭第一個動畫ߑ3;的自動輪਑3;效果，但還不能3526;現৔3;勢302;341;的效果。

3

接下來我們製作手勢拖動時的交互效果。

分別進入動態麵板“background”下的三個狀態，並把狀態內的所有內容全選後右鍵“轉化為動態麵板”，將新轉化到的動態麵板分別命名為“drag1”“dara2”“drag3”。

分別為三個動態麵板添加拖動時的用例動作，具體如下圖：

以上就是所有的步驟，最終效果就是文章開頭中所示的樣子，在這個過程中，有三個技巧點，一個是狀態麵板的循環效果，二是對應不同狀態，動態麵板可以與部件進行聯動，三是對於動態麵板內部的狀態可以再次轉化成動態麵板，用作拖拽手勢的連接件。

希望大家能夠多次嚐試練習，理解其中的關鍵點，也希望大家能夠養成一種習慣，在進行練習前對任務流程進行思路梳理，這樣對理解邏輯更有幫助，有任何問題歡迎來留言。

作者：傑森，微信公眾號：十八般產品

本文由 @傑森 原創發布於人人都是產品經理。未經許可，禁止轉載

題圖來自 Pexels ，基於 CC0 協議

本文到此結束，希望對大家有所幫助呢。