圖片輪播是網頁設計中常用的元素之一，可以給頁面帶來美觀和動態效果。在HTML5中，可以通過以下五張圖片輪播代碼實現。

<div id="slider">
<img src="image1.jpg" />
<img src="image2.jpg" />
<img src="image3.jpg" />
<img src="image4.jpg" />
<img src="image5.jpg" />
</div>

以上代碼中，使用了div標簽來包裹所有的圖片，并設置了一個id屬性，便于后續進行樣式設置和JavaScript腳本使用。相應的CSS樣式如下：

#slider {
position: relative;
max-width: 960px;
margin: 0 auto;
}
#slider img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
}
#slider img:first-child {
opacity: 1;
}

以上樣式中，設置了#slider的相對定位和最大寬度，并將其中所有圖片的位置設置為絕對定位，使圖片能夠在同一位置相互覆蓋。設置了圖片的透明度為0，即所有圖片都不可見，以及使用了transition屬性設置圖片的漸變動畫效果。同時，將第一張圖片的透明度設置為1，即默認顯示第一張圖片。

接下來，使用JavaScript腳本來實現輪播效果：

var i = 0;
var images = document.querySelectorAll('#slider img');
setInterval(function() {
images[i].style.opacity = '0';
i = (i + 1) % images.length;
images[i].style.opacity = '1';
}, 2000);

以上腳本中，使用了setInterval函數來循環執行圖片的隱藏和顯示操作。首先將當前圖片的透明度設置為0，然后通過取余運算將當前圖片的索引值遞增，控制下一張圖片的顯示，最后將下一張圖片的透明度設置為1。

這五張圖片輪播代碼結合HTML、CSS和JavaScript等技術，可以實現簡單而美觀的圖片輪播效果，方便網頁設計者制作優秀的網站。