HTML5 是一種新一代的網(wǎng)頁語言，具有更強(qiáng)大的功能和更豐富的特性。其中，幻燈片效果是在現(xiàn)代網(wǎng)站中常用的一種元素。
在 HTML5 中，可以使用一個簡單的代碼來創(chuàng)建幻燈片效果。首先，需要在網(wǎng)頁的頭部引用 jQuery 庫和一個文本樣式表，代碼如下：
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="style.css">
</head><div class="slider">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
</div>.slider {
position: relative;
height: 400px;
width: 600px;
margin: 0 auto;
}
.slide {
position: absolute;
top: 0;
left: 0;
height: 400px;
width: 600px;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.slide1 {
background-image: url(images/slide1.jpg);
left: 0;
}
.slide2 {
background-image: url(images/slide2.jpg);
left: 600px;
}
.slide3 {
background-image: url(images/slide3.jpg);
left: 1200px;
}$(document).ready(function() {
var currentSlide = 1;
var nextSlide = 2;
setInterval(function() {
$(".slide" + currentSlide).animate({opacity: 0}, 500);
$(".slide" + nextSlide).animate({opacity: 1}, 500);
currentSlide = nextSlide;
nextSlide = nextSlide == 3 ? 1 : nextSlide + 1;
}, 3000);
});