html图片轮播： html css网页制作龙猫宫崎骏5页 带js 带jquery 带轮播 带js表单校验 带留言表单 HTML+CSS+JS网页设计期末课程大作
以下是一个简单的HTML、CSS和JavaScript的图片轮播实现，用于展示龙猫的五张照片，并带有轮播功能和表单校验。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dragon Quest Slideshow</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f7f7f7;
}
#slideshow {
position: relative;
width: 500px;
height: 300px;
margin: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#slideshow img {
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
transition: opacity 0.5s ease;
}
#slideshow img.active {
opacity: 1;
}
</style>
</head>
<body>
<div id="slideshow">
<img class="active" src="dragon1.jpg" alt="Dragon Quest 1">
<img src="dragon2.jpg" alt="Dragon Quest 2">
<img src="dragon3.jpg" alt="Dragon Quest 3">
<img src="dragon4.jpg" alt="Dragon Quest 4">
<img src="dragon5.jpg" alt="Dragon Quest 5">
</div>
<script>
let currentIndex = 0;
const images = document.querySelectorAll('#slideshow img');
const nextImage = () => {
images[currentIndex].classList.remove('active');
currentIndex = (currentIndex + 1) % images.length;
images[currentIndex].classList.add('active');
};
setInterval(nextImage, 3000);
</script>
</body>
</html>在这个例子中，我们使用了CSS来制作简单的图片轮播效果，并通过JavaScript实现了轮播功能。图片列表是固定的，但你可以根据需要添加更多的图片。轮播会在每3秒钟自动切换到下一张图片。这个例子不包括表单校验，但你可以很容易地添加表单校验逻辑，比如使用HTMLFormElement.checkValidity()方法。
评论已关闭