CSS縮略圖自動幻燈片是一種非常實用的設計方法。通過CSS編寫代碼，可以實現(xiàn)非常美觀的圖片幻燈片展示功能，不需要使用JavaScript等其他語言。

.slideshow {
position: relative;
width: 100%;
height: 400px;
display: block;
margin: 0 auto;
overflow: hidden;
}
.slideshow img {
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 400px;
opacity: 0;
transition: all ease-in-out 0.5s;
}
.slideshow img.active {
z-index: 1;
opacity: 1;
}
.slideshow:hover img {
opacity: 0.4;
}
.slideshow:hover img.active {
opacity: 1;
}

以上是CSS幻燈片的基本代碼。其原理是通過絕對定位來實現(xiàn)幻燈片效果，通過opacity屬性來實現(xiàn)淡入淡出的動畫效果。

在HTML代碼中，只需要在幻燈片容器中添加需要展示的圖片，然后設置其中一個作為默認顯示圖片，添加一個active類即可。

<div class="slideshow">
<img src="image1.jpg" class="active">
<img src="image2.jpg">
<img src="image3.jpg">
</div>

上述代碼中，第一張圖片是默認顯示的，通過class來設置為active狀態(tài)。

此外，還可以通過hover偽類來實現(xiàn)鼠標懸浮時的效果。當鼠標懸浮在幻燈片上時，圖片的opacity屬性會變?yōu)?.4；當鼠標懸浮在active狀態(tài)的圖片上時，圖片的opacity屬性會變?yōu)?，即還原成原來的狀態(tài)。

CSS幻燈片不僅可以應用在縮略圖上，還可以應用在展示單張圖片或廣告等上面。通過不同的效果設置，可以達到非常炫酷的效果。