在網頁中，我們經常會使用圖片來展示信息或美化頁面。為了增強用戶體驗，我們可以使用 CSS 來實現圖片輪播效果，讓頁面更加生動有趣。

CSS 的時間切換圖片功能可以通過 transition 屬性和一個定時器來實現。下面是一個例子：

<style>
.image-slider {
position: relative;
}
.image-slider img {
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: opacity 1s;
}
.image-slider img.active {
opacity: 1;
}
</style>
<div class="image-slider">
<img src="image1.jpg" alt="Image 1" class="active">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
<script>
setInterval(function() {
var active = document.querySelector('.image-slider img.active');
var next = active.nextElementSibling || active.parentNode.firstElementChild;
active.classList.remove('active');
next.classList.add('active');
}, 5000);
</script>

在上述代碼中，我們首先使用了一個 div 元素包含了三張圖片，同時使用 position: relative; 來確保三張圖片能夠互相疊加在同一個位置。

然后我們使用 CSS 的 position: absolute; 把每一張圖片定位到左上角，并設置 opacity 初始值為 0。我們為 img 標簽添加了一個類名 .active，表示當前顯示的圖片。我們使用 transition: opacity 1s; 讓圖片在 1 秒的時間內淡入或淡出。

最后，我們使用 setInterval() 方法來創建一個 5 秒的定時器，每到時間就把當前顯示的圖片隱藏，并把下一張圖片顯示出來。

這樣的效果可以讓多張圖片在同一區域切換顯示，引導用戶關注頁面中不同的信息內容，增加頁面的互動性和生動性。