CSS3幻燈片可以為網頁增加更多的互動性和視覺體驗。除了手動切換，還可以使用CSS3實現自動切換。本文將介紹如何使用CSS3實現幻燈片自動切換。

CSS3代碼如下：
.slider {
position: relative;
width: 100%;
height: 500px;
}
.slider>img {
position: absolute;
left: 0;
top: 0;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
}
.slider>input {
display: none;
}
.slider>label {
position: absolute;
left: 50%;
bottom: 10px;
transform: translateX(-50%);
cursor: pointer;
color: #fff;
font-size: 24px;
z-index: 1;
}
.slider>input:checked+img {
z-index: 0;
}
.slider>input:checked+label {
bottom: 20px;
}
JavaScript代碼如下：
var index = 0;
var maxIndex = 3;
setInterval(function() {
index++;
if(index>maxIndex) {
index = 0;
}
document.getElementById("slide"+index).checked = true;
}, 3000);

首先，定義一個類名為“slider”的容器用于包含幻燈片。這個容器需要設置位置（position），寬高（width、height）。其中的圖片使用絕對定位（position:absolute）并覆蓋整個容器（left、top、width、height設置為100%）。使用一個input元素作為切換幻燈片的按鈕，每張圖片都需要一個對應的label元素。點擊label元素即可切換到相應的圖片。將input元素隱藏（display:none）。

接下來，使用JavaScript代碼控制幻燈片自動切換。設置一個變量index表示當前顯示的圖片索引，maxIndex表示最大索引。使用setInterval方法循環執行切換操作，每隔3秒將index加1。當index大于maxIndex時，將index重新設置為0。通過document.getElementById方法獲取到對應的input元素，將其checked屬性設置為true即可切換到相應的圖片。

以上就是使用CSS3和JavaScript實現幻燈片自動切換的方法。通過這種方式，可以為網頁添加更多的動態效果，提升用戶體驗。