我們的第壹步是框住整個轉盤盒子和它需要的東西。(附圖片是為了避免輪播切換圖片時出現空白。)
然後設置轉盤框的大小和裏面按鈕的樣式。在設置樣式之前對頁面進行css初始化。
設置轉盤框尺寸和轉盤圖片尺寸。(將瀏覽器縮小到所見內容的50%)
設置定位將圖片固定在輪播框中,然後將輪播最初顯示的第壹張圖片設置為出現在輪播框中(要設置內嵌樣式才能得到)。
設置四個按鈕(不壹定是點,也可以是其他)在carousel中切換圖片。
思考
主要是通過壹個顯示框和壹個圖片存儲框,顯示框的大小就是輪播中要顯示的圖片的大小,或者說是壹張圖片的大小。但是收納盒的寬度必須足夠大,才能讓所有的圖片水平浮動。然後隱藏收納盒溢出的部分,再調用動畫。
動畫詳解
@keyframes指的是動畫過程中的每壹個畫面,也可以說是電影中的每壹幀。我們可以設置每個屏幕從0到100%。