HTML5提供了很多強大的功能，其中之一是幻燈片效果。通過使用HTML5的動畫特性和CSS3的過渡效果，我們可以創建自己的漂亮幻燈片。
下面是一個基本的HTML5幻燈片效果代碼示例：
<!DOCTYPE html>
<html>
<head>
<title>HTML5幻燈片效果</title>
<style>
/* 幻燈片樣式 */
.slide {
position: relative;
height: 300px;
width: 500px;
margin: auto;
}
.slide img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s;
}
.slide img.active {
opacity: 1;
}
/* 幻燈片控制樣式 */
.controls {
text-align: center;
}
.controls button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px;
text-align: center;
display: inline-block;
font-size: 16px;
margin: 10px 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="slide">
<img src="slide1.jpg" class="active">
<img src="slide2.jpg">
<img src="slide3.jpg">
</div>
<div class="controls">
<button onclick="prevSlide()">上一張</button>
<button onclick="nextSlide()">下一張</button>
</div>
<script>
var slideIndex = 0; // 當前顯示的幻燈片索引
var slides = document.getElementsByClassName("slide")[0].getElementsByTagName("img"); // 幻燈片圖片數組
// 顯示幻燈片
function showSlide(index) {
if (index >= slides.length) {
slideIndex = 0; // 回到第一個幻燈片
} else if (index < 0) {
slideIndex = slides.length - 1; // 回到最后一個幻燈片
}
for (var i = 0; i < slides.length; i++) {
slides[i].classList.remove("active"); // 隱藏所有幻燈片
}
slides[slideIndex].classList.add("active"); // 顯示當前幻燈片
}
// 上一張幻燈片
function prevSlide() {
slideIndex--;
showSlide(slideIndex);
}
// 下一張幻燈片
function nextSlide() {
slideIndex++;
showSlide(slideIndex);
}
// 自動播放幻燈片
setInterval(function() {
slideIndex++;
showSlide(slideIndex);
}, 5000);
</script>
</body>
</html>這是一個簡單的幻燈片效果，它通過在幻燈片DIV中放置圖片，并使用CSS3的opacity屬性和transition屬性來控制圖片的顯隱和切換。我們還添加了上一張和下一張按鈕，通過JavaScript代碼來實現幻燈片的控制。
總的來說，使用HTML5的幻燈片效果非常簡單，只需要一些基本的HTML、CSS和JavaScript知識。如果您想要創建更復雜的幻燈片效果，可以嘗試使用HTML5的畫布(Canvas)、SVG等特性。
上一篇vue改多個css樣式
下一篇vue改變組件css