CSS 頁(yè)面圖片左右滑動(dòng)是一種非常常見(jiàn)的頁(yè)面效果，它可以讓用戶(hù)通過(guò)滑動(dòng)頁(yè)面輕松瀏覽各種不同的圖片。

/* 創(chuàng)建圖片容器并設(shè)置其樣式 */
.image-container {
display: flex;
overflow-x: scroll;
width: 100%;
height: 500px;
}
/* 在容器中添加圖片，設(shè)置它們的樣式 */
.image {
flex-shrink: 0;
height: 100%;
width: 500px;
margin-right: 20px;
}

上面的代碼是實(shí)現(xiàn)該效果的核心代碼，其中包含了兩個(gè)關(guān)鍵的 CSS 類(lèi)：.image-container和.image。

.image-container類(lèi)設(shè)置了圖片容器的樣式。這個(gè)容器是一個(gè)flex容器，其子元素會(huì)在水平方向上排列。為了能夠讓容器成為一個(gè)可滾動(dòng)的容器，它的overflow-x屬性被設(shè)置為scroll。

.image類(lèi)設(shè)置了圖片的樣式。這個(gè)類(lèi)的作用比較簡(jiǎn)單，它將圖片的尺寸設(shè)置為固定的值，并設(shè)置一個(gè)小的右邊距，以便將這些圖片分開(kāi)。

總的來(lái)說(shuō)，使用 CSS 實(shí)現(xiàn)頁(yè)面圖片左右滑動(dòng)是非常容易的。只需要?jiǎng)?chuàng)建一個(gè) flex 容器，并將它的overflow-x屬性設(shè)置為scroll即可。接著，為容器中的圖片添加樣式，使它們成為固定尺寸并具有一定的排列間隔。