CSS是制作網頁的重要技術之一，它不僅可以美化網頁的樣式，還可以實現各種效果，例如圖片切換效果。

/*HTML*/
<div id="slider">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
/*CSS*/
#slider {
position: relative;
width: 800px;
height: 400px;
}
#slider img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
}
#slider img:first-child {
opacity: 1;
}
/*JavaScript*/
let images = document.querySelectorAll('#slider img');
let currentImage = 0;
function nextImage() {
images[currentImage].style.opacity = 0;
currentImage = (currentImage + 1) % images.length;
images[currentImage].style.opacity = 1;
}
setInterval(nextImage, 5000);

首先，在HTML中，我們創建了一個div，并在其中放置了三張圖片。然后，我們在CSS中設定了div的大小，并將其中的所有img元素的位置設為absolute，這樣它們就可以重疊在一起了。我們還將所有img元素的透明度設為0，并設置了一個過渡效果，以便在切換時產生動畫效果。最后，我們將第一張img元素的透明度設為1，以使它顯示出來。

在JavaScript中，我們首先獲取了所有的img元素和一個變量currentImage，表示當前正在顯示的圖片的索引。接著，我們創建了一個函數nextImage，在其中將當前顯示的圖片的透明度設為0，并將currentImage加1（如果currentImage已經到了最后一張圖片，則跳回第一張）。然后我們將下一張圖片的透明度設為1。最后，我們使用setInterval函數每5秒鐘調用一次nextImage函數，以實現自動切換圖片的效果。

通過CSS和JavaScript的結合，我們可以實現各種各樣的效果，包括圖片切換、輪播、動畫等等。掌握CSS和JavaScript，就能讓網頁更加生動、豐富。