HTML5 自適應輪播代碼是一種流行的網頁設計方法，它可以自動調整網頁中圖片或頁面元素的大小，以適應不同屏幕尺寸的設備。在這里，我們將演示如何使用 HTML5 標記語言編寫自適應輪播代碼，并將其應用于網頁設計。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 自適應輪播代碼</title>
<style>
/* 樣式表 */
#slider {
position: relative;
overflow: hidden;
width: 100%;
height: 500px;
}
#slider img {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
}
.slider-control {
position: absolute;
z-index: 10;
}
.slider-prev {
left: 10px;
top: 50%;
transform: translateY(-50%);
}
.slider-next {
right: 10px;
top: 50%;
transform: translateY(-50%);
}
/* 媒體查詢 */
@media screen and (max-width: 767px) {
#slider {
height: 300px;
}
#slider img {
min-height: 300px;
min-width: auto;
max-width: 100%;
}
}
</style>
</head>
<body>
<div id="slider">
<img src="img1.jpg" alt="圖片 1">
<img src="img2.jpg" alt="圖片 2">
<img src="img3.jpg" alt="圖片 3">
<div class="slider-control slider-prev"></div>
<div class="slider-control slider-next"></div>
</div>
<script>
/* JavaScript 代碼 */
var sliderImage = document.querySelectorAll("#slider img");
var sliderControl = document.querySelectorAll(".slider-control");
var current = 0;
var timer = setInterval(function() {
sliderImage[current].classList.remove("show");
current = (current + 1) % sliderImage.length;
sliderImage[current].classList.add("show");
}, 5000);
sliderControl.forEach(function(control) {
control.addEventListener("click", function() {
clearInterval(timer);
var direction = this.classList.contains("slider-prev") ? -1 : 1;
sliderImage[current].classList.remove("show");
current = (current + direction + sliderImage.length) % sliderImage.length;
sliderImage[current].classList.add("show");
});
});
</script>
</body>
</html>上面的代碼包括 HTML、CSS 和 JavaScript 三個部分。HTML 部分包含對輪播元素的定位和 image 標記用于顯示圖片資產。CSS 部分的樣式描述了輪播元素的大小、位置和控制器的位置。最后，JavaScript 部分提供自動播放和手動切換輪播元素的功能。
為了讓輪播適應不同的屏幕尺寸，我們使用了“媒體查詢”，這是 CSS 技術的一部分，用于在不同上下文中應用不同的樣式。在本例中，我們為較小的屏幕尺寸調整輪播元素的大小和圖片資產的大小。
總之，HTML5 自適應輪播代碼是一種很有用的技術，它可以為不同尺寸的設備和屏幕提供一致的用戶體驗。您可以將這個代碼嵌入到您的網頁中，以便為您的用戶提供更好的瀏覽體驗。