用H5写一个包含三张图片的幻灯片网页
时间: 2023-06-01 21:04:32 浏览: 58
<!DOCTYPE html>
<html>
<head>
<title>幻灯片</title>
<style>
.slide {
display: none;
height: 400px;
width: 600px;
}
</style>
</head>
<body>
<div>
<img class="slide" src="https://images.pexels.com/photos/6172786/pexels-photo-6172786.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Slide 1">
<img class="slide" src="https://images.pexels.com/photos/6485611/pexels-photo-6485611.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Slide 2">
<img class="slide" src="https://images.pexels.com/photos/6172757/pexels-photo-6172757.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Slide 3">
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var slides = document.getElementsByClassName("slide");
for (var i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 2000);
}
</script>
</body>
</html>