在HTML5中，制作圖片輪播是一項非常有趣的任務。它能夠幫助你展示你的圖片，使得你的網站更具吸引力。下面我們來看一下如何使用HTML5制作圖片輪播。
<html>
<head>
<title>圖片輪播</title>
<style>
.slideshow {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
.slideshow img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: opacity 1s ease-in-out;
}
.slideshow img.active {
opacity: 1;
}
</style>
</head>
<body>
<div class="slideshow">
<img src="img1.jpg" class="active">
<img src="img2.jpg">
<img src="img3.jpg">
</div>
<script>
var images = document.querySelectorAll('.slideshow img');
var currentImageIndex = 0;
var intervalTime = 5000;
setInterval(function() {
images[currentImageIndex].classList.remove('active');
currentImageIndex++;
if (currentImageIndex === images.length) {
currentImageIndex = 0;
}
images[currentImageIndex].classList.add('active');
}, intervalTime);
</script>
</body>
</html>以上這段代碼中，我們使用了一個div容器，并在其中放置了多張圖片。我們通過CSS樣式來控制輪播圖的展示效果，通過JavaScript腳本實現輪播圖的自動播放。我們定義了一個active類來控制圖片的顯示，然后通過JavaScript代碼，每隔一段時間就將active類添加到下一張圖片上。
使用HTML5制作輪播圖是一種非常不錯的方式，能夠在你的網站中展示多張圖片，使得網站更加生動有趣。希望以上代碼能夠幫助到你，祝你輪播圖制作成功！
下一篇html5制作封面代碼