HTML5是目前最流行的網頁開發語言之一，它可以幫助開發者實現各種酷炫的網頁效果。其中，輪播圖是非常常見的效果之一，實現起來也非常簡單。下面我們來看一下HTML5的簡單輪播代碼。 首先，我們需要在HTML代碼中定義一個div容器，來存放我們的輪播圖。代碼如下：

<div id="carousel"></div>

接下來，我們需要在CSS中設置一些樣式，使得輪播圖能夠適配不同的設備。代碼如下：

#carousel {
width: 100%;
height: 300px;
overflow: hidden;
position: relative;
}
#carousel img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity .5s ease-in-out;
}
#carousel img.active {
opacity: 1;
}

上述代碼中，我們定義了一個id為“carousel”的div容器，并設置了它的寬度為100%，高度為300px，以及對溢出內容進行隱藏。我們接著對div中的img標簽進行設置，使其可以自適應容器的大小，并設置了圖片的位置和不透明度，并且定義了過渡動畫。最后，我們還定義了一個“active”類，用來切換輪播圖中展示的圖片。 接下來，在JavaScript中，我們需要編寫一些代碼來實現自動播放的效果。代碼如下：

var carousel = document.getElementById("carousel");
var imgs = carousel.getElementsByTagName("img");
var index = 0;
function changeImg() {
imgs[index].classList.remove("active");
index = (index + 1) % imgs.length;
imgs[index].classList.add("active");
}
setInterval(changeImg, 3000);

其中，我們首先獲取carousel容器以及其中的img標簽，并定義了一個index變量來記錄當前展示的圖片。接著，我們編寫changeImg函數來實現輪播的效果，首先將當前圖片去除“active”類，然后將index加1，如果已經到達最后一張圖片，則重新從第一張開始輪播，并給下一張圖片增加“active”類。最后，我們使用JavaScript中的setInterval函數來定時輪播圖片。 最后，我們將上述三段代碼整合到一起，即可實現一個簡單的輪播圖效果。這里需要注意的一點是，圖片大小需要一致，否則會出現圖片大小不一致的問題。下面是完整的代碼示例：

<div id="carousel">
<img src="img1.jpg" alt="img1" class="active">
<img src="img2.jpg" alt="img2">
<img src="img3.jpg" alt="img3">
</div>
<style>
#carousel {
width: 100%;
height: 300px;
overflow: hidden;
position: relative;
}
#carousel img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity .5s ease-in-out;
}
#carousel img.active {
opacity: 1;
}
</style>
<script>
var carousel = document.getElementById("carousel");
var imgs = carousel.getElementsByTagName("img");
var index = 0;
function changeImg() {
imgs[index].classList.remove("active");
index = (index + 1) % imgs.length;
imgs[index].classList.add("active");
}
setInterval(changeImg, 3000);
</script>

使用這個簡單的HTML5代碼，我們就可以實現一個酷炫的輪播效果了。總結一下，我們需要在HTML代碼中定義一個包含img標簽的div容器，并在CSS中設置寬高及樣式，最后在JavaScript中編寫自動輪播的代碼即可。