JS和CSS实现的原生轮播图
warning:
这篇文章距离上次修改已过436天，其中的内容可能已经有所变动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>原生轮播图</title>
<style>
.carousel {
position: relative;
width: 300px;
height: 200px;
margin: auto;
overflow: hidden;
}
.carousel img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
transition: transform 0.5s ease-in-out;
}
</style>
</head>
<body>
<div class="carousel">
<img src="image1.jpg" alt="Image 1" class="current">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
<script>
const images = document.querySelectorAll('.carousel img');
let currentIndex = 0;
function goToNextImage() {
images[currentIndex].classList.remove('current');
currentIndex = (currentIndex + 1) % images.length;
images[currentIndex].classList.add('current');
}
setInterval(goToNextImage, 3000);
</script>
</body>
</html>这个简单的代码实例展示了如何使用原生的HTML、CSS和JavaScript来创建一个基本的轮播图效果。轮播图中的图片通过class="current"来控制显示，并且使用setInterval函数每3秒钟切换到下一张图片。这个例子教会开发者如何用最基本的代码实现一个轮播效果，而无需依赖外部库。
评论已关闭