HTML5 幻燈片是一個非常流行的網頁設計元素，可以有效地吸引用戶的注意力并增強網頁的交互性。下面是一個簡單的 HTML5 幻燈片代碼示例：
<!DOCTYPE html>
<html>
<head>
<title>HTML5 幻燈片</title>
<meta charset="UTF-8">
<style>
/* 樣式定義 */
.slide {
display: none;
}
.active {
display: block;
}
.button {
cursor: pointer;
}
</style>
</head>
<body>
<div class="slide active"><img src="slide1.jpg"></div>
<div class="slide"><img src="slide2.jpg"></div>
<div class="slide"><img src="slide3.jpg"></div>
<div class="slide"><img src="slide4.jpg"></div>
<div class="slide"><img src="slide5.jpg"></div>
<div class="button" onclick="prevSlide()">上一張</div>
<div class="button" onclick="nextSlide()">下一張</div>
<script>
// JavaScript 代碼
let slideIndex = 0;
const slides = document.querySelectorAll(".slide");
function showSlide (index) {
if (index < 0) {
index = slides.length - 1;
}
if (index > slides.length - 1) {
index = 0;
}
slides.forEach((slide) => {
slide.classList.remove("active");
});
slides[index].classList.add("active");
slideIndex = index;
}
function prevSlide () {
showSlide(slideIndex - 1);
}
function nextSlide () {
showSlide(slideIndex + 1);
}
setInterval(() => {
nextSlide();
}, 5000);
</script>
</body>
</html>上面的 HTML5 幻燈片代碼包括三個部分：HTML、CSS 和 JavaScript。HTML 部分包含了幻燈片圖片和兩個按鈕；CSS 部分定義了幻燈片的樣式，包括隱藏和顯示、按鈕樣式等；JavaScript 部分實現了幻燈片的自動播放、上一張和下一張操作。通過這個示例代碼，你可以學習如何使用 HTML5 幻燈片來增強你的網頁設計。
上一篇asp代碼寫在html
下一篇mysql固定字段18位