今天心血來潮(?)，來研究了每次看到都很想要知道怎麼實作的輪播圖功能。上網查了一下實作方法不外乎就是CSS、JavaScript、使用套件。不過這次我想要先挑戰用CSS來呈現這個功能，接下來就稍微整理一下這次實作的概念。
*最近太愛逛網拍了，所以借用網拍網站上的圖片來實作XD
實作的大方向
1. 用HTML呈現橫向擺放的多張圖片(如圖下所示)
2. 隱藏超過框框外的圖片
3. 讓多張圖片組合的一大張圖片每一個關鍵影格就移動一張圖片的寬度
需要用到的重點CSS屬性
- @keyframes：設定動畫的關鍵影格
- animation: 將動畫設置在想讓它動起來的地方
- display, overflow: 將多張圖片排成一列，並且隱藏超出框框的圖片
細部的實作內容
1. 首先我先以ul、li來呈現HTML的內容，這部分記得要用CSS把ul、li的預設樣式重置。
2. 再來設定外框的寬及高，我是設定成900px X 500px
3. 圖片部分則透過flex讓它們能以一列的方向排列，再到外框處透過overflow把超出範圍的圖片隱藏。
4. 透過@keyframes設定關鍵影格，以translateX控制圖片列往左移動。
*以一張圖片寬(900px)為基準，往上增加。
*每一次移動中間都有空出間格(ex: 20% => 25%)，這個間隔式圖片轉換的時間，0%~20%則是圖片持續顯示的時間。
5. 用animation把設定好的關鍵影格套用在ul上，控制每個li的顯示。
缺點部分
雖然這樣可以讓圖片自動輪播，但是在最後一張跳到第一張時，沒辦法以滑動的方式轉過去，實際呈現會閃跳一下，這部分我還在想要怎麼解決QQ
另外也想要再研究一下用JavaScript要怎麼呈現，呈現方式應該會更靈活。
最後附上這次實作的codepen連結
https://codepen.io/pinkymini/pen/dyXJErZ
打完收工~掰餔
