循環播放圖片是網頁設計中常用的一種方式，可以通過 HTML 代碼實現。

首先，在 HTML 文件中創建一個 img 標簽，給定圖片的路徑和屬性：

<img src="images/pic1.jpg" alt="pic1" id="img-slider">

接著，在 JavaScript 中定義需要循環播放的圖片路徑和時間間隔，并實現圖片自動播放的代碼：

var images = ["images/pic2.jpg", "images/pic3.jpg", "images/pic4.jpg"];
var timeInterval = 3000;
var i = 0;
setInterval(changeImage, timeInterval);
function changeImage() {
var img = document.getElementById("img-slider");
img.src = images[i];
i++;
if (i >= images.length) {
i = 0;
}
}

在代碼中，創建了一個數組 images，其中包含需要播放的圖片路徑。使用一個計時器和 changeImage 函數來循環播放這些圖片，每隔 timeInterval 秒鐘切換一張圖片，直到播放完所有圖片。

最后，在 CSS 中設置圖片的樣式和尺寸：

#img-slider {
width: 100%;
height: auto;
}

這樣，在瀏覽器中打開 HTML 文件時，將會自動循環播放指定的圖片。