HTML5圖片輪播是網頁設計中常用的元素之一，它可以將不同的圖片在網頁上進行輪流播放，使網頁內容更加生動有趣。下面我們來看一下HTML5圖片輪播的代碼式樣。

<!-- HTML5圖片輪播代碼 -->
<div id="slider">
<figure>
<img src="image1.jpg" alt="image1">
<img src="image2.jpg" alt="image2">
<img src="image3.jpg" alt="image3">
<img src="image4.jpg" alt="image4">
</figure>
</div>
<!-- CSS樣式代碼 -->
#slider {
width: 100%;
overflow: hidden;
}
#slider figure {
position: relative;
width: 500%;
margin: 0;
padding: 0;
list-style: none;
transition: 2s;
}
#slider figure img {
width: 20%;
float: left;
}
#slider input[type="radio"] {
display: none;
}
#slider label {
display: block;
float: left;
width: 2%;
height: 100px;
margin-top: -100px;
text-align: center;
color: #fff;
opacity: 0.8;
cursor: pointer;
transition: opacity 0.2s;
}
#slider label:hover {
opacity: 1;
}
#slider input:checked + label {
background: #000;
opacity: 1;
}
#slider input:checked ~ figure {
margin-left: -20%;
}

在這段代碼中，我們使用了HTML5的<figure>標簽來包含不同的圖片，將它們作為一個整體進行控制。CSS樣式中給出了容器和圖片的樣式，以及相鄰圖片之間的切換效果和實現方式。同時，我們還可以通過修改樣式中的數值來改變輪播的速度、動畫效果等。

HTML5圖片輪播可以運用在很多網頁設計中，比如展示產品、圖片分享、廣告等，對于網站的吸引力和體驗都有著重要的作用。因此，學習HTML5圖片輪播的代碼式樣可以讓我們更好地應用HTML5技術，設計出更加出色的網頁。