在网站的设计搭建中,一些客户经常会有想要将页面的某些内容重点突出展示的想法,比如客户案例这类的精华内容。
如上图所示,我们可以给图文组件加一个效果,达到这样突出展示的效果,那么我们话不多说,直接进入教程环节。
<script>
document.querySelector('.swiperxcenter')._swiperInterceptor = function(x){
x.loop = true
x.centeredSlides= true
x.watchSlidesProgress= true
x.slidesPerView= 'auto'
x.on.progress = function(progress) {
for (i = 0; i < this.slides.length; i++) {
var slide = this.slides.eq(i);
var slideProgress = this.slides[i].progress;
// 每页显示几个, 必须是3/5/7/9当中一个
var number = 7;
var scale = {
3: 1.5,
5: 1.37,
7: 1.29,
9: 1.25,
}[number];
var modify
if (slideProgress > 0) {
modify = Math.pow(Math.abs(slideProgress), scale) / 2
} else {
modify = -Math.pow(Math.abs(slideProgress), scale) / 2
}
var translate = modify * 520 + '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);
}
}
}
x.on.setTransition= function(transition) {
for (var i = 0; i < this.slides.length; i++) {
var slide = this.slides.eq(i)
slide.transition(transition);
}
}
return x
}
</script>
<style>
.swiperxcenter {
position: relative;
/* width: 1200px; */
margin: 0 auto
}
.swiperxcenter .swiper-container{
padding: 30px 0;
}
.swiperxcenter .swiper-slide {
width: 520px;
background: #fff;
box-shadow: 0 8px 30px #ddd;
}
代码组件设置完成以后,我们再把图文组件的轮播效果打开,并把图文组件的代码标签设置为swiperxcenter,即可获得这个效果了。
记得保存并发布网站,去查看效果哦。好了,今天的小教程就到这里了,我们下期再见吧!
常见问题