在網站設計中，經常需要使用圖片輪播來展示多張圖片。而CSS可以實現無限循環輪播效果，非常方便。本文就介紹CSS實現圖片自動切換效果的方法。

CSS圖片輪播的實現，基于無序列表（ul）和列表項（li）的結構。每個列表項包含一張圖片和一個文本描述。默認情況下，所有列表項是水平排列的，不過CSS可以控制其布局。

<ul id="slider">
<li>
<img src="img1.jpg" />
<p>圖片1描述</p>
</li>
<li>
<img src="img2.jpg" />
<p>圖片2描述</p>
</li>
<li>
<img src="img3.jpg" />
<p>圖片3描述</p>
</li>
</ul>

接下來就是CSS的實現。首先，設置ul的寬度為100%以適應頁面寬度。然后，設置li的寬度為100%、高度為自適應，并且浮動在左邊。接著，設置ul和li的overflow屬性為hidden，以隱藏超出部分。最后，設置動畫效果，讓li從左到右滑動。

#slider {
width: 100%;
position: relative;
overflow: hidden;
}
#slider li {
list-style: none;
width: 100%;
float: left;
position: relative;
height: auto;
}
#slider img {
width: 100%;
height: auto;
}
#slider p {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0,0,0,0.5);
padding: 5px;
color: #fff;
}
@keyframes slide {
0% {
left: 0;
}
100% {
left: -100%;
}
}
#slider li:first-child {
animation: slide 5s infinite;
}
#slider li:nth-child(2) {
animation-delay: 1s;
}
#slider li:nth-child(3) {
animation-delay: 2s;
}
#slider li:nth-child(4) {
animation-delay: 3s;
}
#slider li:nth-child(5) {
animation-delay: 4s;
}

最后，設置第一個列表項（即第一張圖片）的動畫效果，讓其從左到右滑動，設置每個列表項的動畫延遲時間，使其分別在不同時間開始滑動。這樣，就實現了無限循環的圖片輪播效果。