HTML5圖片輪播是一種常用的網頁設計元素，可用于展示組織或品牌的圖片、產品廣告或九宮格風格圖標等。以下是一份HTML5圖片輪播代碼示例：

<div id="slideshow">
<figure>
<img src="image1.jpg" alt="Image 1">
<figcaption>Image 1 Caption</figcaption>
</figure>
<figure>
<img src="image2.jpg" alt="Image 2">
<figcaption>Image 2 Caption</figcaption>
</figure>
<figure>
<img src="image3.jpg" alt="Image 3">
<figcaption>Image 3 Caption</figcaption>
</figure>
<figure>
<img src="image4.jpg" alt="Image 4">
<figcaption>Image 4 Caption</figcaption>
</figure>
</div>
<style>
#slideshow {
position: relative;
width: 100%;
height: 500px;
}
#slideshow figure {
position: absolute;
opacity: 0;
transition: opacity 1s ease-in-out;
}
#slideshow figure.active {
opacity: 1;
}
#slideshow img {
width: 100%;
height: auto;
}
#slideshow figcaption {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
background: #000;
color: #fff;
opacity: 0.7;
padding: 5px;
font-size: 1.5rem;
}
#slideshow figcaption:hover {
opacity: 1;
}
</style>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var slides = document.getElementById("slideshow").getElementsByTagName("figure");
var captions = document.getElementById("slideshow").getElementsByTagName("figcaption");
for (var i = 0; i< slides.length; i++) {
slides[i].classList.remove("active");
captions[i].classList.remove("active");
}
slideIndex++;
if (slideIndex >slides.length) {slideIndex = 1;}
slides[slideIndex-1].classList.add("active");
captions[slideIndex-1].classList.add("active");
setTimeout(showSlides, 5000);
}
</script>

上述代碼使用