現在網站設計已經成為現代生活中必不可少的一部分，而照片輪播自動切換效果是設計中常見而且比較流行的效果之一。
在HTML中實現照片自動切換效果，需要使用一些基本的HTML標簽和代碼語言，那么下面就來介紹一下如何實現這個效果。
<!DOCTYPE html>
<html>
<head>
<title>照片自動切換效果</title>
<style>
#slider {
width: 800px;
height: 400px;
position: relative;
overflow: hidden;
}
#slider img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
}
#slider img.active {
opacity: 1;
}
</style>
</head>
<body>
<div id="slider">
<img src="image1.jpg" class="active">
<img src="image2.jpg">
<img src="image3.jpg">
<img src="image4.jpg">
<img src="image5.jpg">
</div>
<script>
setInterval(function() {
var activeImg = document.querySelector('#slider img.active');
activeImg.classList.remove('active');
var nextImg = activeImg.nextElementSibling;
if (!nextImg) {
nextImg = document.querySelector('#slider img:first-child');
}
nextImg.classList.add('active');
}, 3000);
</script>
</body>
</html>以上代碼中，首先創建一個div，使用overflow:hidden屬性將其設為隱藏。然后在div中創建多個img標簽，每個tag包含一張圖片，并使用position:absolute屬性將其位置設為絕對位置。對于所有的圖片，都將opacity設為0并使用transition屬性實現漸隱漸顯的效果。而我們需要讓第一張圖片顯示，因此，給第一個圖片添加一個class名為active，然后通過JavaScript代碼實現切換效果。使用setInterval函數，實現每隔一定時間自動切換一次圖片，activeImg.classList.remove('active')移除當前活動的圖片，nextImg.classList.add('active')激活下一張圖片，這樣就實現了自動輪播效果。
在了解這套代碼之后，你可以在你的網站中應用這套代碼實現照片的自動輪換。
下一篇css 奇數行偶數行