【前端技巧】实现一个横向循环焦点图片展示的轮播【2】

接上回

【前端技巧】实现一个横向循环焦点图片展示的轮播

发现把代码放在移动端这种竖屏的时候看起来很别扭。两边太小了，看起来很突兀，观感也不好🤦🏻‍♀️🤦🏻‍♀️🤦🏻‍♀️

想要 1 2和4 5这四张和第3张图大小差异小一点，看起来美观一点

现在效果	想要的效果

新思路

最开始我还是尝试通过调整缩来改变 swiper-slide 的大小，结果发现效果达不到理想效果，与我便放弃这种思路了

于是我决定先把 swiper-slide 铺平，然后尝试通过操作dom的方式。

不想写了，直接上代码！！！ 这个方法甚至代码更少，更简单！！

    <div id="certify">
	  <div class="swiper-container">
	  	<div class="swiper-wrapper">
	  	  <div class="swiper-slide"><img src="images/feature1.png" /></div>
	  	  <div class="swiper-slide"><img src="images/feature2.png" /></div>
	  	  <div class="swiper-slide"><img src="images/feature3.png" /></div>
	  	  <div class="swiper-slide"><img src="images/feature4.png" /></div>
	  	  <div class="swiper-slide"><img src="images/feature5.png" /></div>
	  	</div>
	  </div>
	</div>

#certify {
    position: relative;
    margin: 0 aut;
}

#certify .swiper-container {
    padding: 20px 0;
    width: 640px;
    border: 1px solid blue;
}
#certify .swiper-slide {
    width: 330px;
    height: 567px;
    overflow: hidden;
}
#certify .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
}

certifySwiper = new Swiper('#certify .swiper-container', {
	watchSlidesProgress: true,
	slidesPerView: 'auto',
	centeredSlides: true,
	loop: true,
	loopedSlides: 5,
	autoplay: false,
	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;
				// 当slide超出可视区域时，增加位移修正系数
				if (Math.abs(slideProgress) > 1) {
					modify = (Math.abs(slideProgress) - 1) * 0.4 + 1;
				}
				// 计算位移、缩放和层级
				translate = slideProgress * modify * 250 + 'px';  // 水平位移
				scale = 1 - Math.abs(slideProgress) / 8;          // 缩放比例
				zIndex = 999 - Math.abs(Math.round(10 * slideProgress)); // z轴层级
				// 应用变换效果
				slide.transform('translateX(' + translate + ') scale(' + scale + ')');
				slide.css('zIndex', zIndex);
				slide.css('opacity', 1);
				// 当slide距离当前可视区域太远时隐藏
				if (Math.abs(slideProgress) > 3) {
					slide.css('opacity', 0);
				}
			}
		},
		setTransition: function (swiper, transition) {
			for (var i = 0; i < this.slides.length; i++) {
				var slide = this.slides.eq(i)
				slide.transition(transition);  // 为每个slide设置过渡时间
			}
		}
	}
})

总结

和前一篇文章 【前端技巧】实现一个横向循环焦点图片展示的轮播 思路不同的是，这一次是通过js操作dom的方式实现效果，上一次是通过css来完成的。

突然想到渡一前端大师课 中讲到的一句话：前端功能实现更重要的是想象力