要实现 Swiper（轮播图）的缩放效果，你可以使用 Swiper 的回调函数和 CSS3 的 transform 属性。以下是一个简单的示例代码：
HTML:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="image1.jpg" alt="Image 1">
</div>
<div class="swiper-slide">
<img src="image2.jpg" alt="Image 2">
</div>
<!-- 更多图片 -->
</div>
</div>
CSS:
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
display: flex;
justify-content: center;
align-items: center;
}
.swiper-slide img {
width: auto;
max-height: 100%;
}
JavaScript:
var swiper = new Swiper('.swiper-container', {
// 配置其他参数
on: {
init: function () {
var activeSlide = this.slides[this.activeIndex];
zoomIn(activeSlide);
},
slideChangeTransitionEnd: function () {
var activeSlide = this.slides[this.activeIndex];
zoomIn(activeSlide);
}
}
});
function zoomIn(slide) {
var img = slide.querySelector('img');
if (img) {
img.style.transform = 'scale(1.2)';
img.style.transitionDuration = '0.6s';
setTimeout(function() {
img.style.transform = 'scale(1)';
img.style.transitionDuration = '0.6s';
},500); // 调整延迟时间和过渡持续时间以获得所需的效果
}
}
上述代码中，我们使用了 Swiper 的 on 配置项来监听初始化和切换幻灯片的事件。在每次切换到新的幻灯片时，会调用 zoomIn 函数来进行缩放效果。通过设置图片的 CSS3 transform 属性实现缩放动画。
注意：为了让图片居中显示，在 CSS 中添加了一些样式，并且需要引入 Swiper 的相关库文件。确保正确加载并配置 Swiper 库后，以上代码应该能够实现缩放效果。
内容由零声教学AI助手提供，问题来源于学员提问
