CSS如何做輪播圖？輪播圖可以讓頁面展示更加豐富多彩，提高用戶的閱讀體驗。接下來，本文將介紹如何使用CSS實現輪播圖。

/* 定義輪播容器 */
.carousel {
position: relative;
overflow: hidden;
}
/* 定義輪播中的圖片 */
.carousel img {
width: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: opacity 1s ease;
}
/* 定義當前圖片的樣式 */
.carousel img.active {
opacity: 1;
}

以上是 CSS 樣式的部分，可以根據需求自行更改。

/* JS控制輪播 */
const images = document.querySelectorAll(".carousel img");
const intervalTime = 3000;
let index = 0;
function loop() {
images[index].classList.remove("active");
index++;
if (index >= images.length) {
index = 0;
}
images[index].classList.add("active");
}
setInterval(loop, intervalTime);

以上是 JavaScript 部分，其作用為每隔 intervalTime 毫秒就將當前圖片的 active 類去掉，并將下一張圖片的 active 類添加上，從而實現輪播。其中，images 存儲了所有輪播圖片。

需要注意，該代碼通過定時器實現輪播，如果需要暫停輪播或者點擊左右按鈕切換圖片等操作，需要添加相應的事件。

通過上述CSS和JS代碼的組合，即可實現簡單的輪播圖。希望這篇文章對您有所幫助！