CSS 是一種常用于網頁設計和開發的語言，可以通過它來實現豐富的頁面效果。其中，循環橫向顯示圖片是一個非常常用的功能，在這篇文章中，我們將介紹如何使用 CSS 來實現這個效果。

首先，我們需要準備一組要顯示的圖片。假設我們有三張圖片，分別是：

<img src="image1.jpg" />
<img src="image2.jpg" />
<img src="image3.jpg" />

為了讓這三張圖片循環橫向顯示，我們需要設置它們的樣式。首先，我們需要將它們放在一個容器中：

<div class="image-container">
<img src="image1.jpg" />
<img src="image2.jpg" />
<img src="image3.jpg" />
</div>

然后，在 CSS 中為容器設置以下樣式：

.image-container {
display: flex;
flex-wrap: wrap;
}

通過設置 display 屬性為 flex，我們可以使容器內的子元素排列成一行。而通過設置 flex-wrap 屬性為 wrap，我們可以讓子元素自動換行，以達到橫向循環的效果。

接下來，我們還需要為容器內每個子元素設置樣式：

.image-container img {
flex-basis: 33.33%;
max-width: 33.33%;
height: auto;
}

通過設置 flex-basis 和 max-width 屬性為 33.33%，我們可以讓每個子元素的寬度平分容器寬度的三分之一，從而讓它們等寬。而設置 height 屬性為 auto 則可以根據圖片原始比例自適應高度。

最后，在 CSS 中還可以設置圖片之間的間距：

.image-container img + img {
margin-left: 1%;
}

通過設置相鄰兩張圖片之間的 left margin 為 1%，我們可以在圖片間增加一定的間距。

通過上述設置，我們就可以在網頁中實現循環橫向顯示圖片的效果。