HTML5和CSS3技術使得輪播圖成為網站開發中不可或缺的一部分。今天我們來看一下如何使用HTML5和CSS3來創建一個簡單的輪播圖。

第一步是創建HTML結構。我們將使用ul和li標簽來創建輪播圖的圖片，以及使用a標簽來創建輪播圖的導航按鈕。以下是一個簡單的HTML結構代碼：

<div class="slider">
<ul class="slides">
<li><img src="slider-1.jpg"></li>
<li><img src="slider-2.jpg"></li>
<li><img src="slider-3.jpg"></li>
<li><img src="slider-4.jpg"></li>
<li><img src="slider-5.jpg"></li>
</ul>
<ul class="navigation">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>

接下來是CSS的部分。我們將使用CSS3的transition屬性來創建動畫效果。以下是一個簡單的CSS代碼:

.slider {
width: 800px;
height: 400px;
position: relative;
overflow: hidden;
}
.slides {
position: absolute;
top: 0;
left: 0;
width: 500%;
height: 100%;
list-style: none;
margin: 0;
padding: 0;
}
.slides li {
float: left;
width: 20%;
height: 100%;
}
.slides img {
width: 100%;
height: 100%;
}
.navigation {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.navigation li {
display: inline-block;
margin: 0 10px;
}
.navigation a {
display: block;
width: 15px;
height: 15px;
background-color: #fff;
border-radius: 50%;
text-align: center;
line-height: 15px;
color: #333;
}
.navigation a.active {
background-color: #333;
color: #fff;
}
.slides {
transition: transform 1s;
}

使用這些代碼，我們現在可以創建簡單的輪播圖！