純CSS自動幻燈片是指使用CSS來實現幻燈片的自動播放效果,無需JavaScript或其他編程語言的幫助。
實現純CSS自動幻燈片的方法是通過使用CSS3的動畫和定時器來實現幻燈片的切換和自動播放。這種方法也稱為“無限循環幻燈片”,因為幻燈片可以無限循環播放。
/* 樣式代碼 */ .slider { position: relative; width: 100%; height: 500px; overflow: hidden; } .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; } .slide.active { opacity: 1; } .slide:nth-child(1) { background-image: url("slide-1.jpg"); } .slide:nth-child(2) { background-image: url("slide-2.jpg"); } .slide:nth-child(3) { background-image: url("slide-3.jpg"); } .slide:nth-child(4) { background-image: url("slide-4.jpg"); } .slide:nth-child(5) { background-image: url("slide-5.jpg"); } /* 自動播放代碼 */ @keyframes autoplay { 0% { margin-left: 0; } 20% { margin-left: 0; } 25% { margin-left: -100%; } 45% { margin-left: -100%; } 50% { margin-left: -200%; } 70% { margin-left: -200%; } 75% { margin-left: -300%; } 95% { margin-left: -300%; } 100% { margin-left: -400%; } } .slider.active { animation: autoplay 20s infinite; }
在代碼中,我們先定義了一個.slider類來給整個幻燈片容器設置樣式。然后,我們定義了一個.slide類來給每個幻燈片設置樣式,并用nth-child選擇器給每個幻燈片設置不同的背景圖片。我們還定義了一個.active類來給當前顯示的幻燈片設置樣式。
接下來,我們使用CSS3的動畫來實現幻燈片的自動播放。我們定義了一個名為autoplay的關鍵幀動畫,用來控制幻燈片容器的margin-left屬性在幻燈片之間的切換。最后,我們通過給.slider.active添加動畫來啟動自動播放。
通過這樣的代碼,我們可以輕松地實現一個無限循環的自動幻燈片效果,而無需使用JavaScript或其他編程語言。