在web開發中，輪播圖是一個非常常見的組件。css是實現輪播效果的工具之一，下面就來介紹如何使用css來實現輪播效果。

HTML結構：
<div class="slider">
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">
</div>
CSS樣式：
.slider {
width: 100%;
height: 500px;
position: relative;
overflow: hidden;
}
.slider img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
opacity: 0;
transition: opacity 0.6s ease-in-out;
}
.slider img.active {
opacity: 1;
}
Javascript邏輯：
//獲取輪播圖容器和圖片節點
const slider = document.querySelector('.slider');
const sliderImgs = document.querySelectorAll('.slider img');
//初始化active值為0
let active = 0;
//設置輪播圖切換函數
function slide() {
//循環所有圖片節點，把opacity設置為0，同時把active值對應的圖片opacity設置為1
for (let i = 0; i < sliderImgs.length; i++) {
sliderImgs[i].style.opacity = '0';
}
sliderImgs[active].style.opacity = '1';
//active值增加1，如果已經到最后一張圖片，則active值重新設置為0
active++;
if (active >= sliderImgs.length) {
active = 0;
}
}
//設置輪播圖循環觸發函數
setInterval(slide, 3000);

上面的代碼片段中，主要是通過CSS的position屬性和opacity屬性來實現輪播效果。首先對輪播容器設置position為relative，然后對圖片節點設置position為absolute，通過把四個方向的值都設為0，并把margin設為auto來實現水平居中的效果。初始時，所有的圖片節點的opacity都設為0，只有active值對應的節點的opacity被設置為1，這樣就只顯示一張圖片。接著就是Javascript代碼，通過setInterval函數每隔一定時間就循環輪播圖節點，把active值對應的圖片的opacity設為1，達到切換圖片的效果。