首頁圖片切換是網站設計中常見的功能之一。這里我們將介紹如何使用CSS來實現這個功能。

HTML結構:
<div class="slider">
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">
</div>
CSS:
.slider {
position: relative;
overflow: hidden;
width: 100%; 
}
.slider img {
position: absolute;
top: 0;
left: 0;
z-index: -1; 
transition: opacity 0.5s ease-in-out;
}
.slider img:first-of-type {
z-index: 1; 
}
.slider img:not(:first-of-type) {
opacity: 0; 
}
JavaScript:
var index = 0;
var slides = document.querySelectorAll('.slider img');
var len = slides.length;
function slideShow() {
index++;
if (index === len) {
index = 0;
}
slides[index].style.opacity = 1;
slides[index - 1].style.opacity = 0;
}
setInterval(slideShow, 5000);

首先，我們使用一個div元素來包含我們的圖片，使其能夠作為一個整體進行操作。通過給這個div元素設置overflow:hidden樣式，我們可以將圖片遮蓋并隱藏超出部分。接著，我們為圖片設置CSS樣式，使其始終處于相同的位置上，使用z-index屬性來指定圖片的層疊順序。此外，我們還設置了過渡（transition）效果，使得切換過程更加順滑。我們使用:first-of-type和:not(:first-of-type)屬性選擇器來為第一張圖片設置較高的層疊順序，并將其他圖片的不透明度設置為0。

最后，我們使用JavaScript來控制圖片的切換。我們通過定時器來實現圖片的自動輪播。首先，我們定義了一個index變量，表示當前顯示的圖片的索引。然后用querySelectorAll方法選擇所有的圖片。接著，定義了一個slideShow函數，該函數用于切換圖片。該函數首先增加index的值，然后使用style.opacity屬性為下一張圖片設置不透明度。使用setTimeout方法來指定切換的時間間隔，以達到自動輪播的效果。