HTML5圖片自動輪播是一種廣泛應用的效果，一般用于網站首頁、產品展示等頁面。下面我們來看一段純代碼實現圖片自動輪播。

<div class="slide">
<img src="img1.jpg" alt="圖片1">
<img src="img2.jpg" alt="圖片2">
<img src="img3.jpg" alt="圖片3">
<img src="img4.jpg" alt="圖片4">
</div>
<script>
var slide = document.querySelector('.slide');
var imgList = slide.getElementsByTagName('img');
var index = 0;
var timer;
function changeImg() {
for (var i = 0; i < imgList.length; i++) {
imgList[i].style.display = 'none';
}
imgList[index].style.display = 'block';
index++;
if (index >= imgList.length) {
index = 0;
}
timer = setTimeout(changeImg, 2000);
}
changeImg();
</script>

以上代碼段中，我們首先用<div>標簽包裹了需要展示的圖片，圖片資源通過<img>標簽設置。在<script>標簽中，我們選取了class為“slide”的<div>元素，并通過getElementsByTagName方法獲取其中的圖片元素。接著定義了一個變量index，用于記錄當前顯示的圖片序號，并設置了一個計時器，每隔2秒調用一次changeImg函數使圖片自動輪播。

changeImg函數先隱藏所有圖片，然后將當前序號對應的圖片顯示出來，并將序號加一。如果當前序號已經到達最大值，則將序號重置為0。最后使用setTimeout方法使輪播效果循環展示。通過以上代碼段，我們實現了一段簡單的HTML5圖片自動輪播的效果。