HTML5 圖片自動輪播特效是一種十分流行的網頁設計技術，能夠讓網頁更加生動和有趣。下面是一個簡單的 HTML5 圖片自動輪播特效代碼的示例。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>圖片自動輪播特效</title>
<style>
.slider {
position: relative;
width: 100%;
height: 600px;
overflow: hidden;
}
.slider img {
position: absolute;
width: 100%;
height: 600px;
top: 0;
left: 0;
transition: all 1s;
}
</style>
</head>
<body>
<div class="slider">
<img src="image1.jpg" alt="圖片1">
<img src="image2.jpg" alt="圖片2">
<img src="image3.jpg" alt="圖片3">
</div>
<script>
var slideIndex = 0;
var slides = document.getElementsByTagName("img");
setInterval(function() {
slideIndex++;
if (slideIndex >= slides.length) {
slideIndex = 0;
}
for (var i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex].style.display = "block";
}, 3000);
</script>
</body>
</html>以上代碼實現了一個簡單的自動輪播特效，圖片將在 3 秒的間隔內自動切換。您可以根據自己的需要進行修改和調整。需要注意的是，在使用這種技術時，需確保圖片的尺寸和比例相同，否則可能會影響到頁面的布局和顯示效果。