HTML5幻燈片的特效支持多種方式，其中下滑效果是廣泛應用的一種。下面我們來看一下相關的代碼實現。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5幻燈片-下滑特效</title>
<style>
body {
margin: 0;
padding: 0;
}
.slide {
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
font-size: 5rem;
}
.slide:nth-child(1) {
background-color: red;
}
.slide:nth-child(2) {
background-color: green;
}
.slide:nth-child(3) {
background-color: blue;
}
</style>
</head>
<body>
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
<script>
window.addEventListener("keydown", function(event) {
switch (event.keyCode) {
case 38: // 上箭頭
var currentSlide = document.querySelector(".current-slide");
var prevSlide = currentSlide.previousElementSibling;
if (prevSlide) {
currentSlide.classList.add("slide-up");
prevSlide.classList.add("current-slide");
setTimeout(function() {
currentSlide.classList.remove("current-slide", "slide-up");
}, 500);
}
break;
case 40: // 下箭頭
var currentSlide = document.querySelector(".current-slide");
var nextSlide = currentSlide.nextElementSibling;
if (nextSlide) {
currentSlide.classList.add("slide-down");
nextSlide.classList.add("current-slide");
setTimeout(function() {
currentSlide.classList.remove("current-slide", "slide-down");
}, 500);
}
break;
}
});
</script>
</body>
</html>上面的代碼中，我們使用了flex布局，讓幻燈片在垂直居中的同時水平居中。通過添加不同的顏色，方便我們區分不同的幻燈片。
下滑效果的實現非常簡單，只需要在當前幻燈片添加一個slide-down的類，再將下一個幻燈片添加current-slide類即可。上滑效果同理，只需使用slide-up類。
最后，我們使用鍵盤的上下箭頭來控制幻燈片的切換。通過keydown事件監聽鍵盤事件，實現幻燈片的自動切換。
下一篇vue指令 css