HTML5和CSS圖片輪播是Web開發中常用的技術之一，可以實現網頁上多張圖片的自動輪播，為用戶提供更好的視覺體驗。本文將介紹一些HTML5和CSS實現圖片輪播的代碼。
<html>
<head>
<title>圖片輪播示例</title>
<style>
/* 定義圖片的樣式 */
.slider > img {
display: none;
position: absolute;
top: 0px;
left: 0px;
}
/* 顯示當前圖片 */
.slider > img.active {
display: block;
}
</style>
<script>
window.onload = function() {
var slider = document.querySelector(".slider");
var images = slider.querySelectorAll("img");
var index = 0;
setInterval(function() {
// 下一個圖片的索引號
var nextIndex = (index + 1) % images.length;
// 當前圖片和下一個圖片
var currentImage = images[index];
var nextImage = images[nextIndex];
// 當前圖片隱藏，下一個圖片顯示
currentImage.classList.remove("active");
nextImage.classList.add("active");
// 更新索引號
index = nextIndex;
}, 3000);
};
</script>
</head>
<body>
<div class="slider">
<img src="image1.jpg" class="active">
<img src="image2.jpg">
<img src="image3.jpg">
<img src="image4.jpg">
<img src="image5.jpg">
</div>
</body>
</html>上述代碼實現了一個基礎的圖片輪播功能，通過CSS定義了圖片的樣式，并利用JavaScript定時切換顯示的圖片，從而實現了自動輪播的效果。使用這些技術，我們可以方便地在網頁上展示多張圖片，提高用戶的視覺體驗。
上一篇dockerrbd