文章内容
这个代码实例展示了如何使用SwiperJS创建一个旋转木马效果的图片轮播，其中图片被旋转并缩小以展示其余部分。这个例子简洁明了，并包括了SwiperJS的基本配置.
html代码
<link rel="stylesheet" href="css/swiper-bundle.min.css" />
<link rel="stylesheet" href="css/index.css" />
<div class="w1440">
<div class="pics" id="jqfree">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="#">
<img src="images/1.jpg" />
<p>
图片1</p>
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="images/2.jpg" />
<p>
图片2</p>
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="images/3.jpg" />
<p>
图片3</p>
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="images/4.jpg" />
<p>
图片4</p>
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="images/5.jpg" />
<p>
图片5</p>
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="images/6.jpg" />
<p>
图片6</p>
</a>
</div>
</div>
</div>
<div class="swiper-button-prev">
</div>
<div class="swiper-button-next">
</div>
</div>
</div>
<script src="jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="js/swiper-bundle.min.js"></script>
<script>
jqfreeSwiper = new Swiper('#jqfree .swiper-container', {
watchSlidesProgress: true,
slidesPerView: 'auto',
centeredSlides: true,
loop: true,
loopedSlides: 5,
autoplay: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
},
on: {
progress: function(progress) {
for (i = 0; i < this.slides.length; i++) {
var slide = this.slides.eq(i);
var slideProgress = this.slides[i].progress;
modify = 1;
if (Math.abs(slideProgress) > 1) {
modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
}
translate = slideProgress * modify * 260 + 'px';
scale = 1 - Math.abs(slideProgress) / 5;
zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
slide.transform('translateX(' + translate + ') scale(' + scale + ')');
slide.css('zIndex', zIndex);
slide.css('opacity', 1);
if (Math.abs(slideProgress) > 3) {
slide.css('opacity', 0);
}
}
},
setTransition: function(transition) {
for (var i = 0; i < this.slides.length; i++) {
var slide = this.slides.eq(i)
slide.transition(transition);
}
}
}
})
</script>
