當我們想要在網頁中添加圖片輪播功能時，可以使用CSS來實現，下面是一個基本的樣例：
<!DOCTYPE html>
<html>
<head>
<title>CSS Image Slider</title>
<style>
.slider {
width: 100%;
height: 400px;
overflow: hidden;
}
.slider img {
width: 100%;
height: 400px;
display: none;
}
.slider img:first-child {
display: block;
}
</style>
</head>
<body>
<div class="slider">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
</body>
</html>代碼解釋：
首先我們創建一個類名為slider的div來包裹圖片。我們設置了該div的寬度為100%，高度為400px，以讓其適應不同尺寸的屏幕。我們還設置了overflow:hidden，來確保該div不會顯示過多內容，同時確保我們只能看到一張圖片。
接下來，我們為類名為slider的div中的所有img設置了寬度為100%，高度為400px，并將其初始顯示狀態設置為display:none（即不可見）。
最后，我們將第一個img的display屬性設置為block，以確保第一張圖片可見，如此便實現了基本的CSS圖片輪播功能。
上一篇div 占滿全屏
下一篇css實現圖片陰影效果