HTML5的出現使得網頁設計更加豐富多樣化，其中輪播圖的常用形式之一，也可通過HTML5代碼實現。

<!--HTML代碼-->
<div class="carousel">
<ul class="carousel-list">
<li class="carousel-item"><img src="image1.jpg"></li>
<li class="carousel-item"><img src="image2.jpg"></li>
<li class="carousel-item"><img src="image3.jpg"></li>
</ul>
<a class="prev-btn" href="#">Prev</a>
<a class="next-btn" href="#">Next</a>
</div>

在這個例子中，我們定義了一個名為“carousel”的樣式一塊，它包含了一個“ul”列表，其中每個“li”元素都包含一個圖像，觸發輪播圖的“prev”和“next”按鈕也在其中。

/*CSS代碼*/
.carousel {
position: relative;
width: 800px;
height: 500px;
overflow: hidden;
}
.carousel-list {
position: absolute;
top: 0;
left: 0;
width: 2400px;
height: 100%;
}
.carousel-item {
float: left;
width: 800px;
height: 500px;
}
.prev-btn, .next-btn {
position: absolute;
top: 230px;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: #ccc;
border-radius: 50%;
color: #fff;
font-size: 20px;
text-decoration: none;
}
.prev-btn {
left: 20px;
}
.next-btn {
right: 20px;
}

我們的CSS代碼設置了樣式以及頁面元素的位置，其中輪播圖的容器“carousel”被設置為包含塊；輪播圖列表“carousel-list”則完全覆蓋了“carousel”，每個輪播圖項目通過浮動向左，并設置具體的寬高；最后上文中提到的“prev”和“next”按鈕則通過絕對定位并設置左右距離，下邊距離實現居中。

以上代碼只是一個輪播圖的簡單實現，但是通過HTML5和CSS的靈活運用，輪播圖的樣式和效果可以千變萬化，讓頁面的設計更加生動有趣。