HTML中滾動圖片效果可以通過CSS的animation屬性和keyframes屬性來完成。下面是一段示例代碼：

<div class="slider">
<ul>
<li><img src="image1.jpg"></li>
<li><img src="image2.jpg"></li>
<li><img src="image3.jpg"></li>
</ul>
</div>
<style>
.slider {
width: 100%;
overflow: hidden;
}
.slider ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
animation: scroll 20s infinite;
}
.slider li {
margin-right: 30px;
flex-shrink: 0;
}
.slider li:last-child {
margin-right: 0;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-300px);
}
}
</style>

這段代碼中，使用了一個div元素作為容器，設置該容器的overflow屬性為hidden，以隱藏超出容器的內容。然后使用一個ul元素作為圖片列表，每個圖片使用一個li元素包裹，這些元素默認設置為flex布局。使用CSS的animation屬性，將名為scroll的動畫應用到ul上，每20秒循環一次。scroll動畫使用keyframes屬性定義，從0%到100%移動了-300px的距離，即將圖片向左移動。

綜上所述，通過CSS動畫實現滾動圖片效果是一種簡單而且實用的方式，可以提高頁面的視覺效果和用戶體驗。