每家公司的網站幾乎首頁都會放一個宣傳性質或廣告性質的輪播(Carousel)，用來推廣最新的活動，促銷的產品或是重要消息。這次的主要設計思路有兩個，一個是讓輪播的圖片設定分為行動版跟電腦版的，讓廣告在不同的裝置上能夠有最好的呈現效果，所以需要有兩區，讓使用者分別上傳宣傳圖，二是電腦版跟行動版讓使用者可以預先設定多個群組，這樣過了廣告檔期或是使用者想切換不同的廣告時就可以一鍵切換預先設定好的另一組廣告。

設計

本次設計的主要目標有兩個：

1. 行動裝置適應：為了讓廣告在行動裝置和桌面設備上都能有最佳呈現效果，設計時需支持分別上傳行動版與電腦版的圖片。
2. 多組廣告管理：允許使用者預先設定多個廣告群組，並能一鍵切換至其他已設定好的廣告組合，方便在廣告檔期結束或需求變更時快速切換。

資料表

為了達成需求，我們建立兩張資料表如下：

以及

cia_img_group這張表用來記錄群組屬於行動版還是電腦版group_type，以及是否為啟用中的廣告群組use_flag(T/F)

cia_img用來記錄圖片所屬的群組group_id，圖片本身的實體路徑position，本身的網頁連結url以及點擊圖片要連到的超連結weburl

頁面

輪播的部分我們拿取bootstrap的範例，並先將carousel-inner留空。

前端處理

前端ajax只傳一個參數type讓後端來判斷目前的裝置寬度，所以我們需要一個能及時辨識目前裝置寬度的function如下：

這樣當頁面寬度發生變化時，此function會隨時監控，如果<992px會去抓行動版的圖片，反之則會抓電腦版的。 p="">

後端處理

透過前端傳來的Type我們可以拿來當群組的篩選條件，並搭配目前啟用中的flag判斷，篩選出對應的群組並從中取出該群組的圖片並添加到輪播內進行顯示

結論

實做完成後感覺還有許多地方可以進行優化，例如：調整畫面後因為需要跟後端重新拿照片病讀取，會有一個短暫的延遲，或許可以在讀取完當前版本對應的圖片後，可以先對另一個版本的圖片發出請求進行預載入，在切換實直接更改Carousel的內容會讓使用者體驗更加滑順，另外此版本目前只設計一個網站單一輪播的情況，如果是需要在不同頁面上有複數個輪播做使用，可能需要思考一下如何改設計，目前初步的想法是在group層級上再加一層暫稱為supergroup，每個supergroup下面都可以有一個行動版的group跟網頁版的group是啟用中，透過這樣的設計就可以在同一個網站內使用多個擁有此功能的輪播功能。