JavaScript 和 CSS 在制作網頁時有很多可以展現視覺效果的技巧，其中一種就是圖片滾動播放。通過這種技巧，可以讓圖片在頁面中自動滾動播放，并且可以根據需要設置滾動速度、方向等參數。

HTML 中的圖片滾動播放通常需要 JavaScript 或 CSS 的支持，這里我們就使用 JavaScript 來實現。

<div id="scrollContainer">
<ul id="imageList">
<li><img src="image1.jpg"></li>
<li><img src="image2.jpg"></li>
<li><img src="image3.jpg"></li>
<li><img src="image4.jpg"></li>
</ul>
</div>
<script>
var curIndex = 0;
var imgList = document.getElementById("imageList").getElementsByTagName("li");
var imgLen = imgList.length;
//滾動函數
function changeImg() {
if (curIndex == imgLen - 1) {
curIndex = 0;
} else {
curIndex += 1;
}
for (var i = 0; i < imgLen;i++) {
imgList[i].style.display = "none";
}
imgList[curIndex].style.display = "block";
}
//循環滾動
setInterval(changeImg, 2000);
</script>

上面的代碼中，我們首先定義了一個 div 容器，包含一個 ul 列表。ul 列表中包含了若干個 li 元素，每個 li 元素包含一個 img 元素，即要滾動播放的圖片。

接著我們使用 JavaScript 獲取到了所有的 li 元素，并記錄了圖片數量和當前圖片的下標。

最后我們定義了一個滾動函數 changeImg，用來切換圖片的顯示。在滾動函數中，我們根據當前圖片下標來顯示/隱藏圖片。

最后，我們使用 setInterval 函數來定時調用滾動函數，從而實現自動滾動播放。