HTML5輪播圖是現代網站設計中必不可少的一部分，讓網頁更加生動和富有互動性。它是一種基于HTML5和CSS3技術的網頁元素，可以實現圖片和文字的循環滾動顯示。下面是一個簡單的HTML5輪播圖的代碼實例，代碼使用pre標簽表示：

<div class="slider">
<ul class="slides">
<li>
<img src="image1.jpg" alt="Image 1">
<div class="caption">Text 1</div>
</li>
<li>
<img src="image2.jpg" alt="Image 2">
<div class="caption">Text 2</div>
</li>
<li>
<img src="image3.jpg" alt="Image 3">
<div class="caption">Text 3</div>
</li>
</ul>
</div>
<style>
.slider {
position: relative;
overflow: hidden;
height: 500px;
margin: 0 auto;
}
.slides {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-wrap: nowrap;
animation: slide 5s infinite;
}
.slides li {
position: relative;
flex: 1;
list-style: none;
width: 100%;
height: 100%;
}
.slides img {
width: 100%;
height: 100%;
object-fit: cover;
}
.caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: rgba(0,0,0,0.5);
color: #fff;
font-size: 24px;
padding: 20px;
}
@keyframes slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
</style>

在上面的代碼中，我們使用div元素作為輪播圖的容器，使用ul和li元素來創建輪播圖的每一個內容塊，包括圖片和文字說明。通過CSS的樣式設置，實現了輪播圖的整體布局、圖片大小、文字樣式和動畫效果。其中，animation屬性通過設置keyframes關鍵幀來控制輪播圖的滾動效果。在實際應用中，可根據需要進行修改和擴展，實現更加多樣化的效果。