在網頁中，圖片輪播是一種常見的交互效果，能夠吸引用戶的注意力，提高網頁的美觀度和交互體驗。在 CSS 中，可以通過一些簡單的代碼實現圖片的自動輪播效果，下面來看看具體實現方法。

/*HTML*/
<div class="slider">
<img src="image1.jpg" alt="image1">
<img src="image2.jpg" alt="image2">
<img src="image3.jpg" alt="image3">
</div>
/*CSS*/
.slider{
position: relative;
width: 600px;
height: 400px;
overflow: hidden;
}
.slider img{
position: absolute;
left: 0;
top: 0;
opacity: 0;      /*圖片默認不顯示*/
transition: opacity 1s;
}
.slider img.active{
opacity: 1;       /*當前圖片顯示*/
}
/*JS*/
let images = document.querySelectorAll('.slider img');
let currentIndex = 0;     /*當前顯示圖片的索引*/
function showImage(){
images[currentIndex].classList.remove('active');
currentIndex = (currentIndex + 1) % images.length;     /*輪播到最后一張圖片時，從頭開始*/
images[currentIndex].classList.add('active');
}
setInterval(showImage, 3000);     /*每 3 秒鐘切換一張圖片*/

上述代碼中，通過 CSS 的 position、opacity 和 transition 等屬性實現了圖片輪播的效果。給圖片容器設置了一個寬度和高度，并將 overflow 屬性設為 hidden，將多余部分隱藏。通過設置 position 和 opacity，實現圖片的蒙版和顯示效果。輪播的核心是 JS 部分，其中定時器 setInterval 每隔 3 秒鐘調用一次函數 showImage，切換圖片。在 showImage 函數中，將當前圖片的 active 類移除，并通過簡單的邏輯下標計算，找到下一張應該顯示的圖片，給其添加 active 類，實現了圖片輪播的效果。