在網頁設計中，圖片輪播效果被廣泛地應用，讓網頁更加生動有趣。那么如何通過 HTML 和 CSS 實現一個圖片輪播呢？下面是一個簡單的代碼示例。

<div class="slider">
<div class="slides">
<img src="slide1.jpg">
<img src="slide2.jpg">
<img src="slide3.jpg">
</div>
<div class="controls">
<div class="prev"></div>
<div class="next"></div>
</div>
</div>

/* CSS 代碼 */
.slider {
position: relative;
}
.slides {
position: relative;
overflow: hidden;
height: 400px;
}
.slides img {
width: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity .5s ease-in-out;
}
.slides img.active {
opacity: 1;
}
.controls {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
width: 100%;
}
.controls div {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #ccc;
margin: 0 5px;
cursor: pointer;
}
.controls div.active {
background-color: #333;
}
.prev, .next {
width: 0;
height: 0;
margin: 0 10px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
cursor: pointer;
}
.prev {
border-right: 10px solid #ccc;
}
.next {
border-left: 10px solid #ccc;
}

以上代碼分為 HTML 和 CSS 兩部分。HTML 部分首先包含一個容器 div.slider，其內有一個 div.slides，用來存放輪播的圖片及其控制按鈕 div.controls。其中，每張圖片都通過 img 標簽進行定義。CSS 部分則定義了輪播容器、輪播圖片及其控制按鈕的樣式。指定了每張圖片的寬度為 100%，高度為 slider 容器的高度 400px。而 active 樣式則用來指定當前輪播圖片的顯示，實現圖片輪播的核心。最后，通過 prev 和 next 樣式來指定控制按鈕的樣式，用于用戶手動切換輪播圖片。