html + css + js 实现简易轮播图
warning:
这篇文章距离上次修改已过452天，其中的内容可能已经有所变动。
以下是一个使用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>Simple Slider</title>
<style>
.slider {
position: relative;
width: 300px;
height: 200px;
margin: auto;
}
.slider img {
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
transition: opacity 0.5s;
}
.slider img.active {
opacity: 1;
}
</style>
</head>
<body>
<div class="slider">
<img class="active" src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
<script>
window.onload = function() {
var currentIndex = 0;
var images = document.querySelectorAll('.slider img');
var imageCount = images.length;
setInterval(function() {
images[currentIndex].classList.remove('active');
currentIndex = (currentIndex + 1) % imageCount;
images[currentIndex].classList.add('active');
}, 3000); // Change image every 3 seconds
};
</script>
</body>
</html>这段代码实现了一个简单的轮播图功能。它使用了setInterval函数来定期切换图片，并使用CSS进行样式设置。每张图片都是<img>标签，并且都在.slider容器内。JavaScript脚本用于切换.active类以显示当前图片，并隐藏其他图片。这个例子假设有三张图片，分别命名为image1.jpg、image2.jpg和image3.jpg放在与HTML同一个文件夹内。
评论已关闭