如何使用滾動圖片組件？

1、如何查看滾動圖片組件是否已經存在？

如果這個滾動圖片組件已經存在了，就不需要再添加，直接根據需要進行相關操作就可以（具體操作見下文所述）；

如果你的頁面上需要這個組件，但是還沒有添加，就需要先添加滾動圖片組件了；怎麼判斷頁面上有沒有這個組件？單擊查看如何查看某一塊內容是使用什麼組件製作的？

2、如何添加滾動圖片組件？

在頁面上添加組件的方法都是一樣的，單擊查看如何添加組件？

添加的組件名稱為“滾動圖片”，如下圖1所示：

圖1：

3、如何設置滾動圖片組件？

3.1 進入組件的“設置”分兩種場景

1）此組件已經添加好的場景：進入所有這類組件設置項方法都是一樣的，可以參考這個攻略：如何進入組件的設置項？

2）新添加的組件的場景：在添加此組件時會彈出這個組件的的設置話框。

3.2在組件的設置中可以設置組件展示的內容

3.2.1 設置組件標題、添加圖片、“更多”鏈接、圖片尺寸（如圖2）

組件標題：根據需要決定填寫或不填寫，不填寫不顯示也不佔位置；

添加圖片：在此處可以添加需要展示的圖片。首次添加的圖片需要單擊“本地上傳”按鈕從自己電腦上傳，之前添加過的圖片可以通過“本地上傳”按鈕或“從資料庫選擇”按鈕來上傳圖片，之前上傳過的圖片默認會在資料庫中保存一份；添加好的圖片會顯示在“本地上傳”、“從資料庫選擇”按鈕下方，此處圖片的順序即為圖片輪播的順序，用鼠標左鍵按住圖片可以拖動調整圖片的排序；

“更多”鏈接：如果需要在這個組件所在區域顯示“更多”鏈接，單擊小鍊子按鈕添加鏈接，同時“組件標題”字段需要有內容顯示出來才可以；

圖片尺寸：有些圖片不適合了，需要撤掉換新的圖片了，圖片尺寸要做成多大的合適呢，在圖片下方有一個“原始尺寸”，新圖片直接按照這個原始尺寸大小製作就可以，為了展示美觀，建議所有圖片尺寸都一樣；

為了提升頁面訪問速度，建議圖片上傳前對圖片進行無損壓縮處理，單擊查看圖片無損壓縮工具。

圖2：

3.2.2 設置每張圖片Alt屬性、圖片描述和圖片鏈接（如下圖3所示）：

單擊每張圖片左下角的“編輯”按鈕，可以根據自己的需求設置圖片Alt屬性、圖片描述和圖片鏈接：

圖片ALT屬性：默認取圖片名稱，可以根據需要修改，此文字是圖片無法顯示時的替代文本，同時搜索引擎（像谷歌、百度等）不識別圖片但可以識別圖片Alt屬性，因此填寫圖片Alt屬性對網站優化有好處；

描述：如果需要在圖片下方、圖片上或圖片底端顯示文字，可以通過添加圖片描述文字來實現；

圖片鏈接：如果單擊圖片需要跳轉到其它相關頁面，可以給此圖片添加超鏈接，單擊小鍊子按鈕可以給圖片設置鏈接，單擊查看鏈接類型介紹，如果不需要給圖片設置鏈接，此處不需要設置，空著就可以。

圖3：

3.3在組件的設置中可以設置組件的高級功能（如圖4）

圖片間距：支持設置兩張圖片之間的距離，直接拖動小按鈕調整就可以，一般每張圖片左右邊距為10px-20px比較合適；

響應式變化下不同設備的顯示圖片數：支持自適應和自定義兩個類型。如果想固定不同設備下一行顯示的圖片數量，可以自定義不同設備下的數量。如果不需要的話直接選擇自適應就可以。自定義支持以下幾類常用設備：寬屏電腦、PAD橫屏、PAD豎屏、手機橫屏、手機豎屏。設置好之後，可以到預覽中看一下這幾種不同終端的展示效果（如下圖5、圖6）。

滾動圖片組件是否支持高級功能，是由風格來決定的，單線滾動和循環滾動風格支持高級功能，其它風格不支持。

圖4：

圖5：單擊“預覽”

--》

圖6：切換查看不同終端下的效果

3.4在組件的設置中可以設置組件的風格（如圖7）

選擇展示風格：支持單線滾動、循環滾動、上下滾動、縱向頁簽、突出顯示等多種展示風格，詳細情況如下：

風格1：單線滾動

圖片先向左後向右滾動，要求圖片高度一致，寬度一致，這樣排列起來比較整齊；

風格2：循環滾動

圖片一直向左滾動，要求圖片高度一致，寬度一致，這樣排列起來比較整齊；

風格1和風格2，支持設置以下內容：

是否默認滾動：支持默認滾動或不滾動。滾動：注意展示的圖片總數小於一行展示數量是不會滾動的。不滾動：用戶手動滾動。

滾動間隔時間：支持設置滾動間隔時間；

設置單次滾動的圖片數量：支持單次滾動一張圖片或一頁圖片；

是否顯示左右按鈕：支持顯示按鈕或隱藏按鈕；顯示：若選擇了不滾動模式，那麼按鈕可最好選擇顯示，那樣用戶才會注意到圖片可以滾動。隱藏：若選擇了默認滾動模式，那麼按鈕可以選擇隱藏；

設置按鈕對齊位置：垂直居中（包含圖片和圖片描述文字，若沒有描述文字，包含圖片和一個邊距）、垂直居中於圖片：位於圖片的中間位置。

選擇按鈕樣式：有按鈕在圖片外面和按鈕在圖片裡面兩種，圓形按鈕、方形按鈕可供選擇，根據網站風格選擇按鈕樣式。

是否顯示圖片分頁：分頁可以增加滾動圖片的靈動感，用戶也可以點擊分頁按鈕查看圖片，一般顯示在滾動圖片正下方。

選擇分頁樣式：三種分頁樣式，可供選擇。

圖7：

風格3：上下滾動（圖8）

通過單擊向上或向下按鈕實現圖片上下滾動的視覺效果。

可視圖片數量：支持設置可視區域的圖片數量，單擊下拉小箭頭可以選擇數值；

圖8：

風格4：縱向頁簽（圖9）

圖片描述文字以頁籤的形式列出來，通過切換不同的描述文字頁籤來實現展示圖片。

縱向頁簽風格支持設置：

頁簽按鈕位置：居左或居右。

圖9：

風格5：突出顯示

在可視區域顯示三張圖片，突出顯示中間那一張。

突出顯示風格支持設置：是否默認滾動圖片。

3.5保存組件設置中的內容

組件的內容、高級功能、風格設置好以後，單擊設置框右下角的“保存”按鈕；