最近，在許多網站上，我們可以看到更加生動、多樣化的圖片展示方式，例如圖片輪播、大圖瀏覽等。這些效果都是通過HTML5與CSS3技術實現的。本文將介紹HTML5實現圖片展示的代碼。 首先，讓我們來看一段展示圖片的代碼：

<div id="gallery">
<img src="image1.jpg" alt="image1">
<img src="image2.jpg" alt="image2">
<img src="image3.jpg" alt="image3">
</div>

這段代碼中，我們使用了<div>標簽來創建一個容器，同時在該容器內嵌入了三張圖片（image1.jpg、image2.jpg、image3.jpg）。<img>標簽用來嵌入圖像文件，其中alt屬性為圖片的替代文本。 接下來，我們來實現一個簡單的圖片輪播效果：

<div id="gallery">
<img src="image1.jpg" alt="image1">
<img src="image2.jpg" alt="image2">
<img src="image3.jpg" alt="image3">
</div>
<script>
function changeImg() {
var imgs = document.getElementById('gallery').getElementsByTagName('img');
var len = imgs.length;
var index = 0;
setInterval(function() {
imgs[index].style.display = 'none';
index = (index + 1) % len;
imgs[index].style.display = 'block';
}, 2000);
}
window.onload = changeImg;
</script>

在這段代碼中，我們使用了JavaScript實現圖片輪播效果。函數changeImg()中，我們首先獲取<div>標簽中的所有圖片元素，再利用setInterval()函數實現2秒一次的輪播效果。 由于我們需要控制照片的顯示和隱藏，所以需要使用.style.display屬性，將照片的display屬性設置為‘block’或‘none’。 至此，我們實現了一個簡單的圖片輪播效果。這個效果可以作為網站的基礎HTML5圖片展示，是一個很不錯的開始點。