下面是一段使用HTML5實現圖片定時輪播的代碼，以及相關解釋：

首先，我們需要創建一些HTML元素來承載圖片和輪播控件：

<div id="slider">
<img class="slide" src="image1.jpg">
<img class="slide" src="image2.jpg">
<img class="slide" src="image3.jpg">
<div id="control">
<button id="prev">前一個</button>
<button id="next">后一個</button>
</div>
</div>

其中，id為"slider"的元素是輪播容器，它包含了所有的圖片和輪播控件。class為"slide"的元素是輪播的每張圖片。id為"control"的元素是輪播控件的容器，它包含了前一個和后一個按鈕。

接著，我們需要一些CSS樣式來控制輪播效果。這里只給出一個最基本的樣式，你可以根據自己的需要進行調整：

#slider {
position: relative;
height: 300px;
width: 400px;
overflow: hidden;
}
.slide {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease-out;
}
.slide.active {
opacity: 1;
}
#control {
position: absolute;
bottom: 10px;
right: 10px;
}

其中，#slider的overflow屬性設置為hidden，可以將超出容器部分的圖片隱藏起來，達到輪播的效果。.slide元素采用absolute定位，使其可以覆蓋在一起。opacity屬性控制圖片的透明度，transition屬性控制動畫效果。.slide.active是輪播時會出現的圖片，可以通過JavaScript代碼動態地添加或刪除此類元素。最后，#control元素采用absolute定位，使其顯示在輪播容器的右下角。

最后，我們需要一些JavaScript代碼來控制輪播效果。下面的代碼使用setInterval方法，每隔5秒鐘就切換到下一張圖片：

var slides = document.getElementsByClassName('slide');
var current = 0;
setInterval(function() {
var prev = current;
current = (current + 1) % slides.length;
slides[prev].classList.remove('active');
slides[current].classList.add('active');
}, 5000);

其中，slides是所有的.slide元素，current記錄當前顯示的圖片。每隔5秒鐘，current的值加1，通過取余運算實現循環切換。prev記錄上一張圖片的索引，用于移除.active類。最后，動態地為當前圖片添加.active類，使其可見。