HTML5 首頁輪播是網頁設計中常用的一種元素，可以為網站帶來更加動感、生動的視覺體驗。本文將分享一個基于HTML5的簡單輪播代碼，供讀者參考。
<html>
<head>
<title>HTML5 首頁輪播代碼</title>
<style>
/*輪播圖樣式*/
.carousel{
width: 1000px;
height: 500px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.carousel ul{
width: 5000px;
position: absolute;
left: 0;
top: 0;
}
.carousel li{
float: left;
list-style: none; (無序列表)
}
.carousel li img{
display: block;
width: 1000px;
height: 500px;
}
/*輪播按鈕樣式*/
.prev,.next{
width: 50px;
height: 50px;
position: absolute;
top: 50%;
margin-top: -25px;
background-color: rgba(0,0,0,0.5);
color: #fff;
font-size: 20px;
text-align: center;
line-height: 50px;
cursor: pointer;
}
.prev{
left: 0;
}
.next{
right: 0;
}
.dots{
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
}
.dot{
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
margin: 0 5px;
cursor: pointer;
}
.active{
background-color: red;
}
</style>
</head>
<body>
<div class="carousel">
<ul>
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/4.jpg"></li>
<li><img src="img/5.jpg"></li>
</ul>
<div class="prev"><span><</div>
<div class="next"><span>></span></div>
<div class="dots">
<span class="dot active"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
</body>
</html>以上是一個簡單的HTML5 首頁輪播代碼，可以根據需求進行修改和擴展。同時需要注意的是，輪播圖的圖片也需要提供高質量的素材，并優化圖片大小及格式，以提高網站的性能。