單層、雙層、差速、回溯……一文告訴你8種自動輪播banner怎么做

原創贊收藏評論

舉報 2023-11-07

掃描,分享朋友圈

除了各種各樣觸發式的交互排版效果，我們在圖文中展示產品時，也經常會用到無需觸發的圖片自動輪播效果。

而在圖片自動輪播效果中，像網站banner一樣一張一張左右移入移出的最為經典，也是最受歡迎的圖片輪播效果。
在2021年初就給大家介紹過最為基本的自動輪播banner排版，現在在此基礎上又衍生了不少類似效果，也有不少小伙伴來問是怎么制作的，今天一口氣為大家介紹8種，一起來看看吧！
每一種效果下方都標注有對應的制作組件名稱和編號。
第1種，最為基本的單層、普通自動輪播banner。

*素材來自DR鉆戒《甜度最高的DR情侶鉆戒，4月官宣必備》

組件：自動-輪播Banner

編號：10207（組件）

除了向左輪播，還有向右、向上、向下方向的，以及支持添加超鏈接、小程序的，這里不再一一展示，大家在「自動」-「Banner/輪播」分類中可以找到相關組件。
后面的效果展示也主要以向左輪播為例。
第2種，雙層，前景層輪播背景層不動。

*素材來自FILA《邂逅維羅納朱斯蒂花園…》

組件：零高圖片

編號：10224（組件）

組件：自動-輪播Banner

編號：10207（組件）

iPaiban Pro 編輯器中沒有專門對應該效果的組件，我們可以使用兩個組件搭配實現。
「零高圖片」組件的高度為零，又名萬能背景圖，可以用來做后邊組件的背景。在編輯器中我們先選擇插入一個「零高圖片」組件上傳背景圖，然后再插入「自動-輪播Banner」組件上傳輪播圖即可。所有圖片尺寸保存一致。
該效果中「零高圖片」扮演靜止不動的背景層。
第3種，雙層，前景層不動背景層輪播。

*素材來自ARMANI《加入A|X派對，隨秋冬潮流律動》

組件：自動-輪播Banner

編號：10207（組件）

組件：遮罩

編號：10829（組件）

iPaiban Pro 編輯器中同樣沒有專門對應該效果的組件，但也可以使用兩個組件搭配實現。
「遮罩」組件的高度為零，又名萬能前景圖，可以用來做前邊組件的前景。在編輯器中我們先選擇插入「自動-輪播Banner」組件上傳輪播圖，然后再插入「遮罩」組件上傳前景圖即可。所有圖片尺寸保存一致。
該效果中「遮罩」圖片扮演靜止不動的前景層。
第4種，雙層，前景背景都輪播。

*素材來自Wantsuit紳裝《春日樂輯》

組件：背景輪播+前景輪播

編號：11489（組件）

背景和前景的輪播時間錯開，給人一種前景層跟隨背景層輪播的感覺，很有意思。該效果也專門介紹過，教程戳：《背景和前景一塊輪播，是個什么效果？》
第5種，雙層，前景在背景的特定區域輪播。

*素材來自法拉利中國《法拉利認證易手車金融服務》

組件：自動-輪播Banner(自定義區域)

編號：11187（組件）

同樣是雙層且前景層輪播背景層不動，與第2種相比，該效果的特點是可以將輪播圖設置在背景層的任意區域，且輪播圖尺寸無需和背景圖尺寸一致。
第6種，差速輪播。

*素材來自MCM中國《下一場，MCM 首發亮相》

組件：自動-圖片差速輪播(向左)

編號：11624（組件）

圖片以不同速度輪播，就像后一張圖片推著前一張圖片移動，比普通輪播多了幾分高級感，受到越來越多奢侈品品牌的青睞。
第7種，兩張圖片無限往返式輪播。

*素材來自百達翡麗《腕間的裝飾藝術巡禮》

組件：自動-無限往返式Banner(左右)

編號：10962（組件）

兩張圖片來回輪播切換，比普通輪播更顯干脆利落。
第8種，圖片回溯后重新輪播。

組件：自動-輪播Banner(回溯)

編號：11694（組件）

這種效果較為特殊，它在輪播圖尺寸的要求上不再需要圖片尺寸一致，而只需圖片高度一致即可，不過輪播圖片數需為偶數。
從左到右每次輪播一張圖，全部圖片輪播結束后，圖片快速回到最左邊，然后繼續從左向右依次輪播。快速回溯的效果很有動感。
以上8種效果選擇對應組件后在制作時大同小異，基本上都是上傳素材然后調整輪播參數，我們以第8種效果為例，一起看下詳細的制作教程吧。

工具：iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com

組件：自動-輪播Banner(回溯)

編號：11694（組件）

第1步：選擇組件
登錄 iPaiban Pro 編輯器后，點擊編輯器左側「組件」按鈕，在「自動」-「Banner/輪播」分類中找到「自動-輪播Banner(回溯)」組件，或者直接搜索組件編號11694，點擊選擇。

第2步：上傳圖片素材
在頁面右側，點擊「+」號上傳輪播圖。注意輪播圖張數需要為偶數并且每張輪播圖高度一致（長度可不一致）。

第3步：調整動畫參數
在上傳圖片的下面，滑動滑桿可以分別調整每張圖片停留時間、每次輪播切換時間和圖片回溯用時。

點擊右側「預覽草稿」可隨時預覽效果，根據效果進行調整。
第4步：導入公眾號后臺
預覽效果滿意后點擊「同步至微信后臺」就可以了。

使用同步功能不用頻繁在編輯器和微信后臺切換，同步成功后可以立即掃描二維碼預覽在公眾號的效果。
如需局部導入可參考：《iPaiban Pro小助手安裝和使用教程》

制作SVG交互圖文認準 iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com，復制網址在 PC 端 Chrome（谷歌）瀏覽器打開，即可注冊，編輯器1500+組件/組合現已全部支持免費試用了。

新用戶在「新手禮包」可領取3天企業標準版會員免費商用，以及22個常用必備組件的大禮包（1年）。隨禮包附贈千元優惠券，每單最高立降500元。