在網頁設計中，圖片的使用是非常普遍的。有時候，我們需要將一組圖片展示在同一個頁面上，并希望可以讓這些圖片不斷地滾動展示，這個時候，我們可以使用CSS來實現圖片滾動的效果。

下面就來介紹一下CSS如何設圖片滾動：

/* 以下是 CSS 樣式 */
.container {
width: 100%; /* 圖片容器寬度 */
overflow: hidden; /* 隱藏超出容器范圍的內容 */
}
.slider {
white-space: nowrap; /* 禁止圖片換行 */
transition: transform 500ms ease; /* 添加過渡效果 */
}
.slider img {
display: inline-block; /* 顯示為行內塊元素 */
width: 100%; /* 圖片寬度 */
}
/* 以下是 HTML 結構 */
<div class="container">
<div class="slider">
</div>
</div>
/* 以下是 JavaScript 代碼 */
const slider = document.querySelector('.slider');
// 設置計時器，讓圖片自動滾動
let index = 0;
setInterval(() => {
if (index === slider.children.length - 1) {
index = 0; // 回到第一張圖片
} else {
index++; // 顯示下一張圖片
}
slider.style.transform =translateX(-${index * 100}%); // CSS3 transform 屬性實現滾動動畫
}, 3000);

在這個示例中，我們首先設置了一個圖片容器的寬度，并且隱藏了容器范圍之外的內容。然后，我們設置了一個包含圖片的div元素，并且禁用了換行。最后，我們使用JavaScript來設置一個計時器，讓圖片自動滾動展示，并使用CSS3的transform屬性來實現滾動動畫的效果。

這就是如何使用CSS設圖片滾動的方法，希望這篇文章對你有所幫助！