照片輪播是網站常見的一種功能，可為網站增加視覺效果和用戶體驗。使用HTML和CSS，我們可以輕松創建一個簡潔美觀的照片輪播。
<html>
<head>
<title>照片輪播</title>
<style>
/*設置輪播容器的樣式*/
.slideshow {
width: 100%;
height: 500px;
overflow: hidden;
}
/*設置每張照片的樣式*/
.slideshow img {
width: 100%;
height: 500px;
}
/*設置當前圖片的樣式*/
.active {
opacity: 1;
z-index: 1;
}
/*設置非當前圖片的樣式*/
.slide {
position: absolute;
top: 0;
left: 0;
z-index: 0;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
</style>
</head>
<body>
<div class="slideshow">
<img src="image1.jpg" class="slide active">
<img src="image2.jpg" class="slide">
<img src="image3.jpg" class="slide">
</div>
<script>
/*獲取輪播容器和所有圖片*/
var slides = document.querySelectorAll('.slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide, 5000);
function nextSlide() {
slides[currentSlide].className = 'slide';
currentSlide = (currentSlide + 1) % slides.length;
slides[currentSlide].className = 'slide active';
}
</script>
</body>
</html>上述代碼中，我們首先定義了輪播容器的樣式，包括寬度、高度和溢出隱藏。接著，我們定義了每張圖片的樣式，包括寬度和高度，以及定義了當前圖片和非當前圖片的不同樣式。此外，我們使用JavaScript編寫了一個輪播函數nextSlide，以及使用setInterval函數周期性地調用輪播函數。
通過以上代碼，我們可以輕松創建一個基于HTML和CSS的簡潔美觀的照片輪播。