html中轮播图的做法及源码
在HTML中创建一个简单的轮播图，可以使用以下源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Slider</title>
<style>
.slider {
width: 100%;
height: 300px;
position: relative;
overflow: hidden;
}
.slider img {
width: 100%;
height: 300px;
display: none;
position: absolute;
top: 0;
left: 0;
}
.slider img.active {
display: block;
}
</style>
</head>
<body>
<div class="slider">
<img src="image1.jpg" class="active">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
<script>
let currentIndex = 0;
const images = document.querySelectorAll('.slider img');
const imageCount = images.length;
setInterval(function() {
images[currentIndex].classList.remove('active');
currentIndex = (currentIndex + 1) % imageCount;
images[currentIndex].classList.add('active');
}, 3000); // 时间间隔可以根据需要调整
</script>
</body>
</html>这段代码中，我们定义了一个.slider类来包含轮播图的图片，并使用.active类来标记当前显示的图片。JavaScript 脚本定义了一个定时器，每隔一定时间切换.active类，从而实现图片的自动轮播效果。你需要将image1.jpg、image2.jpg和image3.jpg替换为你的实际图片文件路径。
评论已关闭