當我們想要在網頁上展示圖片集合時，最好的方式就是使用幻燈片放映。在 HTML 中，可以使用<img>標簽來展示圖片，但是如果我們想要讓圖片自動輪播，需要使用一些 JavaScript 代碼。接下來，我們將會介紹 HTML 實現圖片幻燈片放映的代碼。

<!-- HTML 代碼 -->
<div id="slider">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>

上面的代碼中，我們創建了一個<div>包裹了三個<img>標簽，每個<img>會展示一張圖片。我們將會使用 JavaScript 代碼來使得這三張圖片自動輪播。

<!-- CSS 代碼 -->
#slider {
position: relative;
width: 500px;
height: 300px;
margin: auto;
overflow: hidden;
}
#slider img {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
<!-- JavaScript 代碼 -->
var slider = document.querySelector("#slider");
var sliderImages = document.querySelectorAll("#slider img");
var currentImageIndex = 0;
setInterval(function() {
// 隱藏當前圖片
sliderImages[currentImageIndex].style.display = "none";
// 顯示下一張圖片
currentImageIndex++;
if (currentImageIndex >= sliderImages.length) {
currentImageIndex = 0;
}
sliderImages[currentImageIndex].style.display = "block";
}, 5000);

上面的代碼中，我們首先通過document.querySelector()方法獲取到#slider元素，然后通過document.querySelectorAll()方法獲取到#slider img元素集合，即包裹在#slider中的所有<img>元素。接著，我們設置一個變量currentImageIndex來記錄當前顯示的圖片索引。然后使用setInterval()函數來不斷運行輪播函數，函數體內會隱藏當前圖片，并顯示下一張圖片。當顯示到最后一張圖片時，返回顯示第一張圖片。

上面的代碼可以讓圖片自動輪播，但是這些圖片是沒有任何動畫效果的。如果我們想要為幻燈片播放添加一些動畫效果，需要使用一些 jQuery 插件或者自己寫 CSS3 動畫效果的代碼。

當然，在實際的項目中，您可能會使用一些成熟的前端框架來實現圖片幻燈片放映。不過，通過學習這些簡單的 HTML 代碼，您將能夠更好地理解并運用這些前端框架。