HTML是一種超文本標記語言，用來管理和格式化網頁內容。在創建網頁時，經常需要使用HTML結合CSS來創建旋轉輪播。今天，我們將學習如何使用HTML和CSS創建漂亮的輪播。
<html>
<head>
<style>
.carousel {
width: 100%;
height: 400px;
position: relative;
overflow: hidden;
}
.carousel img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 3s linear;
}
.carousel img.active {
opacity: 1;
transition: opacity 3s linear;
}
.carousel input {
display: none;
}
.carousel label {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
color: #333;
padding: 5px 10px;
cursor: pointer;
}
.carousel input:checked + label {
background-color: #333;
color: #fff;
}
#bullet1:checked ~ .slide1,
#bullet2:checked ~ .slide2,
#bullet3:checked ~ .slide3 {
opacity: 1;
z-index: 1;
}
</style>
</head>
<body>
<div class="carousel">
<input type="radio" id="bullet1" name="bullets" checked>
<input type="radio" id="bullet2" name="bullets">
<input type="radio" id="bullet3" name="bullets">
<div class="slide1"><img src="slide1.jpg"></div>
<div class="slide2"><img src="slide2.jpg"></div>
<div class="slide3"><img src="slide3.jpg"></div>
<label for="bullet1">1</label>
<label for="bullet2">2</label>
<label for="bullet3">3</label>
</div>
</body>
</html>以上代碼是一個基本的HTML和CSS輪播器，使用了JavaScript來動態添加和刪除類，讓圖片進行無縫切換。通過調整CSS的屬性，例如滑塊位置和動畫速度，可以輕松地自定義輪播應用程序的外觀和感覺。使用HTML和CSS的輪播可幫助用戶更好地瀏覽網頁上的圖像和信息，給用戶帶來優質的用戶體驗。