CSS 沒有提供直接實現(xiàn)圖片輪播的方式，但我們可以通過利用 CSS 轉(zhuǎn)換功能和過渡來實現(xiàn)圖片輪播。下面我們來學習 CSS 如何實現(xiàn)無縫切換圖片。

/* CSS 代碼 */
img {
position: absolute;  /* 圖片絕對定位，實現(xiàn)重疊 */
transition: opacity 1s;  /* 過渡效果，讓圖片淡入淡出 */
}
img:first-child {
opacity: 1;  /* 初始顯示第一張圖片 */
}
img:not(:first-child) {
opacity: 0;  /* 其它圖片透明度為 0，隱藏起來 */
}

通過上述 CSS 代碼，我們使所有圖片絕對定位，并在樣式中添加了 transition 屬性，它是實現(xiàn)淡入淡出效果的關鍵屬性。接著設置第一張圖片的 opacity 為 1，其它圖片的 opacity 為 0，就可以實現(xiàn)最開始只顯示第一張圖片，其它圖片處于隱藏狀態(tài)。

接下來就是核心代碼，通過 JavaScript 來切換圖片：

/* JavaScript 代碼 */
let i = 0;
let images = document.querySelectorAll('img');
setInterval(() =>{
images[i].style.opacity = 0;  /* 把當前圖片透明度設為 0 */
i = (i + 1) % images.length;  /* 切換圖片 */
images[i].style.opacity = 1;  /* 把下一張圖片透明度設為 1 */
}, 2000);

上面的代碼先聲明一個變量 i 用來記錄當前顯示的圖片的索引，然后使用 document.querySelectorAll() 方法獲取所有圖片，并用 setInterval() 方法來定時執(zhí)行切換圖片的代碼。切換時將當前圖片的 opacity 設為 0，然后通過 i 來切換到下一張圖片并將其 opacity 設為 1，就實現(xiàn)了圖片的無縫輪播。

通過上述的 CSS 和 JavaScript 代碼，我們就可以實現(xiàn) CSS 無縫切換圖片的效果了。