CSS 圖片自動切換效果是在網頁設計中常用的一個技巧。這種效果通常用于網站首頁 banner 廣告或圖片輪播等場合。下面是一個示例代碼：

<div class="slider">
<img src="img1.jpg" alt="slide 1">
<img src="img2.jpg" alt="slide 2">
<img src="img3.jpg" alt="slide 3">
</div>
<style>
.slider {
position: relative;
height: 300px;
}
.slider img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s;
}
.slider img:first-child {
opacity: 1;
}
.slider img.active {
opacity: 1;
}
</style>
<script>
function rotateSlides() {
var firstSlide = document.querySelector(".slider img:first-child");
var activeSlide = document.querySelector(".slider img.active");
// 如果當前活動圖片不是最后一張
if (activeSlide.nextElementSibling) {
activeSlide.nextElementSibling.classList.add("active");
} else {
firstSlide.classList.add("active");
}
activeSlide.classList.remove("active");
}
setInterval(rotateSlides, 5000);
</script>

在這個例子中，我們在 HTML 中創(chuàng)建了一個帶有三張圖片的 DIV 容器。每張圖片都使用絕對定位，并且它們的不透明度設置為零。我們使用 CSS 中的過渡效果，讓圖片的不透明度在一秒鐘的時間內逐漸變化。現(xiàn)在，我們使用 JavaScript 編寫一個函數(shù)，該函數(shù)每五秒鐘自動將當前活動圖片從頁面中移除，并在下一張圖片上應用 active 類，從而呈現(xiàn)出自動輪播的效果。最后，我們在 JavaScript 中使用 setInterval 函數(shù)，每五秒鐘調用一次 rotateSlides 函數(shù)，實現(xiàn)圖片的自動切換效果。