卡片式轮播图原生js
时间: 2023-12-23 09:27:09 浏览: 38
以下是使用原生JS实现卡片式轮播图的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.carousel {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
.carousel .slide {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.carousel .slide.active {
opacity: 1;
}
</style>
</head>
<body>
<div class="carousel">
<div class="slide active">
<img src="image1.jpg" alt="Image 1">
</div>
<div class="slide">
<img src="image2.jpg" alt="Image 2">
</div>
<div class="slide">
<img src="image3.jpg" alt="Image 3">
</div>
</div>
<script>
window.onload = function() {
var carousel = document.querySelector('.carousel');
var slides = carousel.querySelectorAll('.slide');
var currentSlide = 0;
function showSlide(index) {
slides[currentSlide].classList.remove('active');
slides[index].classList.add('active');
currentSlide = index;
}
setInterval(function() {
var nextSlide = (currentSlide + 1) % slides.length;
showSlide(nextSlide);
}, 3000);
};
</script>
</body>
</html>
```
这段代码实现了一个简单的卡片式轮播图效果。通过设置每个轮播项的透明度来实现切换效果,并使用`setInterval`函数定时切换到下一张图片。