在網(wǎng)站中，滾動(dòng)圖片常用于幻燈片展示等場(chǎng)景。CSS 可以實(shí)現(xiàn)這種滾動(dòng)圖片的效果，下面介紹如何設(shè)置。

首先，在 HTML 中，我們需要先定義一個(gè)容器，在其中放置圖片。這個(gè)容器可以是一個(gè) div 標(biāo)簽，也可以是任何具有寬度和高度的 HTML 元素。比如：

<div id="scroll-container">
<img src="image-1.jpg">
<img src="image-2.jpg">
<img src="image-3.jpg">
</div>

然后，我們可以使用 CSS 的 overflow 屬性來(lái)控制容器中的圖片滾動(dòng)。overflow 屬性有兩個(gè)可選值，分別是 hidden 和 scroll。當(dāng)設(shè)置為 hidden 時(shí)，容器內(nèi)容超出部分將被隱藏。當(dāng)設(shè)置為 scroll 時(shí)，容器會(huì)顯示滾動(dòng)條，用戶可以用滾動(dòng)條滾動(dòng)容器內(nèi)的內(nèi)容。比如：

#scroll-container {
width: 300px;
height: 200px;
overflow: scroll;
}

上面的代碼設(shè)置了容器的寬度為 300 像素，高度為 200 像素，并且設(shè)置了 overflow 屬性為 scroll。這樣，當(dāng)容器中的圖片內(nèi)容超出容器大小時(shí)，就會(huì)出現(xiàn)滾動(dòng)條，用戶可以通過(guò)滾動(dòng)條將圖片滾動(dòng)。

最后，如果想要讓圖片在容器中自動(dòng)滾動(dòng)，可以使用 CSS 的 animation 屬性。animation 屬性可以讓元素在一段時(shí)間內(nèi)自動(dòng)播放一組動(dòng)畫(huà)效果。比如：

#scroll-container img {
animation: scroll 10s linear infinite;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}

上面的代碼定義了一個(gè)名為“scroll”的動(dòng)畫(huà)，讓圖片在 10 秒鐘內(nèi)向左平移 100% 的距離，也就是滾動(dòng)完整個(gè)容器。同時(shí)，animation 屬性中的 infinite 關(guān)鍵字表示動(dòng)畫(huà)無(wú)限循環(huán)。這樣，我們就實(shí)現(xiàn)了一個(gè)自動(dòng)滾動(dòng)圖片的效果。