HTML5全屏幻燈片代碼
HTML5是一種用于Web開發(fā)的新技術(shù)，它可以用于構(gòu)建全屏幻燈片。全屏幻燈片是一種相對(duì)較新的Web設(shè)計(jì)趨勢(shì)，它通過使用HTML、CSS和Javascript等技術(shù)來創(chuàng)建交互式、高度動(dòng)態(tài)的幻燈片效果。以下是一段HTML5全屏幻燈片代碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>HTML5全屏幻燈片</title>
<style>
/* 定義樣式 */
*{margin: 0;padding: 0;}
body{background-color: #000;}
.slider{position: fixed;top: 0;left: 0;width: 100%;height: 100%;}
.slide{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-size: cover;background-position: center center;background-repeat: no-repeat;}
.slide>h1{font-size: 60px;color: #fff;text-align: center;line-height: 100%;margin-top: 100px;}
.slide-button{position: absolute;bottom: 50px;left: 50%;transform: translateX(-50%);z-index: 1;}
.slide-button>button{background-color: #fff;color: #000;border: none;padding: 10px 20px;border-radius: 10px;margin-right: 20px;}
</style>
</head>
<body>
<div class="slider">
<div class="slide slide1" style="background-image: url(img/bg1.jpg);">
<h1>歡迎來到HTML5全屏幻燈片</h1>
<div class="slide-button">
<button>上一個(gè)</button>
<button>下一個(gè)</button>
</div>
</div>
<div class="slide slide2" style="background-image: url(img/bg2.jpg);">
<h1>HTML5全屏幻燈片效果</h1>
<div class="slide-button">
<button>上一個(gè)</button>
<button>下一個(gè)</button>
</div>
</div>
<div class="slide slide3" style="background-image: url(img/bg3.jpg);">
<h1>HTML5全屏幻燈片代碼</h1>
<div class="slide-button">
<button>上一個(gè)</button>
<button>下一個(gè)</button>
</div>
</div>
</div>
<script>
/* 定義Javascript */
var slider = document.querySelector('.slider');
var slides = document.querySelectorAll('.slide');
var index = 0;
var total = slides.length - 1;
function navigate(direction){
index = index + direction;
if(index > total) {
index = 0;
}
if(index < 0) {
index = total
}
slider.style.transform = 'translate3d(' + (index * -100) +'%, 0, 0)';
}
document.addEventListener('keydown', function(e){
if(e.keyCode == 37){
navigate(-1);
}
if(e.keyCode == 39){
navigate(1);
}
});
document.querySelector('button:nth-child(1)').addEventListener('click', function(){
navigate(-1);
});
document.querySelector('button:nth-child(2)').addEventListener('click', function(){
navigate(1);
});
</script>
</body>
</html>以上是一段基本的HTML5全屏幻燈片代碼，其中用到了HTML、CSS和Javascript來定義樣式、添加幻燈片和控制切換效果。其中，樣式主要定義了全屏效果、幻燈片樣式以及控制按鈕等。Javascript則主要用于控制幻燈片的切換效果，通過鍵盤方向鍵和按鈕來控制上一個(gè)或下一個(gè)幻燈片的出現(xiàn)。該代碼可用于任何基于HTML5技術(shù)的網(wǎng)站，以實(shí)現(xiàn)類似于PowerPoint的幻燈片效果。