純css3實現圖片自動切換
阿新 • • 發佈：2019-01-01
實現圖片自動切換需要用到的主要是css3裡面的過渡這一節的內容。
大致思路是這樣的：
1、將圖片設定為li的背景圖片；
2、規定一個@keyframes的規則使得圖片按照這個規則進行切換；
3、設定每張圖片出現的時間；
4、新增輪播焦點；
一、用li標籤的background-image是為了實現純CSS的動態切換。
二、規定一個@keyframes的規則，使圖片按照這個規則進行切換。每張圖片顯示分為三個階段：淡入，顯示，淡出。在各個階段顯示出來的效果用百分比來規定。我用了五張圖片，假定整個切換過程耗時20秒，每張圖片顯示3秒，切換一次1秒。分別對應的是15%，5%。
三、為了控制圖片出現的時間，需要設定animation-delay。第一張圖片是一開始就呈現的，所以直接調至5%階段，即將animation-delay設定為-1秒。第二張跟第一張相隔時間為4秒，以此類推，每一張圖片都跟前面的圖片相差4秒。
四、新增輪播焦點是為了告訴瀏覽網頁的人有幾張圖片。輪播焦點的動態實現跟圖片是一樣的，跟上面的程式碼幾乎一致。
最後說一下學到的一個新的點：z-index。這是用來實現同一個位置上不同層次的元素位置的屬性。可以使得元素之間呈現出一定的層次感而不是單純的被覆蓋。
還有就是圖片的高度。因為高度不是定值，所以用在padding中顯示圖片的方法。
/*設定圖片的高度，請根據具體需要修改百分比，響應式及時修改此值*/
.slider,.slider-item{padding-bottom:55%;}