swiper横向轮播——阶梯式滚动轮播

Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件，是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

在工作的过程中遇到需要实现一个阶梯式的轮播效果，思索后决定使用swiper来解决这个问题。需要实现的效果大致如下图。

一、加载swiper插件，需要用到的有 swiper.min.css和swiper.min.js两个文件，可以通过官网下载到本地使用，下载地址。也可以直接使用CDN，CDN地址。

通过在html文件中引入swiper插件，并简单的初始化swiper，基本上可以得到一个可以进行轮播的效果。

引入swiper

<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/swiper.min.js"></script>

初始化一个swiper，返回初始化后的Swiper实例

<!-- html，包括需要轮播的图片和左右切换按钮，以及分页器 -->
<div id="certify"><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><img src="data:images/certify01.png" /></div><div class="swiper-slide"><img src="data:images/certify02.png" /></div><div class="swiper-slide"><img src="data:images/certify03.png" /></div><div class="swiper-slide"><img src="data:images/certify04.png" /></div><div class="swiper-slide"><img src="data:images/certify05.png" /></div></div></div><div class="swiper-pagination"></div>    <!-- 分页器 --><div class="swiper-button-prev"></div>    <!-- 上一个 --><div class="swiper-button-next"></div>    <!-- 下一个 -->
</div>

@charset "utf-8";
/* CSS Document *//* 定义样式，包括整体样式，分页器样式和前进后退按钮样式等内容 */
#certify {position: relative;width: 1200px;margin: 0 auto
}#certify .swiper-container {padding-bottom: 60px;
}#certify  .swiper-slide {width: 520px;height: 408px;background: #fff;box-shadow: 0 8px 30px #ddd;
}
#certify  .swiper-slide img{display:block;
}
#certify  .swiper-slide p {line-height: 98px;padding-top: 0;text-align: center;color: #636363;font-size: 1.1em;margin: 0;
}#certify .swiper-pagination {width: 100%;bottom: 20px;
}#certify .swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 5px;border: 3px solid #fff;background-color: #d5d5d5;width: 10px;height: 10px;opacity: 1;
}#certify .swiper-pagination-bullets .swiper-pagination-bullet-active {border: 3px solid #00aadc;background-color: #fff;
}#certify .swiper-button-prev {left: -30px;width: 45px;height: 45px;background: url(../images/wm_button_icon.png) no-repeat;background-position: 0 0;background-size: 100%;
}#certify .swiper-button-prev:hover {background-position: 0 -46px;background-size: 100%
}#certify .swiper-button-next {right: -30px;width: 45px;height: 45px;background: url(../images/wm_button_icon.png) no-repeat;background-position: 0 -93px;background-size: 100%;
}#certify .swiper-button-next:hover {background-position: 0 -139px;background-size: 100%
}

// js 初始化Swiper，包括配置是否自动播放，是否循环，是否显示分页器和前进后退按钮等内容
var certifySwiper = new Swiper('#certify .swiper-container', {watchSlidesProgress: true,slidesPerView: 'auto',centeredSlides: true,loop: true, autoplay: true,loopedSlides: 5,autoplay: true,navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},pagination: {el: '.swiper-pagination',//clickable :true,},})

完成这些工作后，你得到了一个可以轮播但是大小一致，并排排列的效果。

要达到预期的效果还需要使用注册事件，swiper4.0开始使用关键词this指代Swiper实例，大致使用方法为：

<script language="javascript">
var mySwiper = new Swiper('.swiper-container', {on: {slideChange: function () {console.log(this.activeIndex);},},
};
//或者
var mySwiper = new Swiper('.swiper-container');
mySwiper.on('slideChange', function () {//...
});
</script>

目前，轮播的各个项目之间是并排的关系，需要成阶梯形状呈现就需要在合适的机会改变各个项目的大小

var certifySwiper = new Swiper('#certify .swiper-container', {watchSlidesProgress: true,slidesPerView: 'auto',centeredSlides: true,loop: true, autoplay: true,loopedSlides: 5,autoplay: true,navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},pagination: {el: '.swiper-pagination',//clickable :true,},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;slide.transform('translateX(' + translate + ') scale(' + scale + ')');}},setTransition: function (transition) {for (var i = 0; i < this.slides.length; i++) {var slide = this.slides.eq(i)slide.transition(transition);}}}})

成功的改变大小后你会发现，后面的永远盖在前一个的上面，导致看起来并不是我们想要的结果，这个时候显然还需要在合适的机会改变各个项目的层级，也就是最中间的在最上面，剩下的往两边递减。

var certifySwiper = new Swiper('#certify .swiper-container', {watchSlidesProgress: true,slidesPerView: 'auto',centeredSlides: true,loop: true, autoplay: true,loopedSlides: 5,autoplay: true,navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},pagination: {el: '.swiper-pagination',//clickable :true,},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);}}}})

这样，就基本实现了我想要的效果了。

完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>Swiper的切换</title><link rel="stylesheet" href="css/swiper.min.css"><link rel="stylesheet" href="css/certify.css"><script src="js/swiper.min.js"></script><style>#certify {position: relative;width: 1200px;margin: 0 auto}#certify .swiper-container {padding-bottom: 60px;}#certify  .swiper-slide {width: 520px;height: 408px;background: #fff;box-shadow: 0 8px 30px #ddd;}#certify  .swiper-slide img{display:block;}#certify .swiper-pagination {width: 100%;bottom: 20px;}#certify .swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 5px;border: 3px solid #fff;background-color: #d5d5d5;width: 10px;height: 10px;opacity: 1;}#certify .swiper-pagination-bullets .swiper-pagination-bullet-active {border: 3px solid #00aadc;background-color: #fff;}#certify .swiper-button-prev {left: -30px;width: 45px;height: 45px;background: url(../images/wm_button_icon.png) no-repeat;background-position: 0 0;background-size: 100%;}#certify .swiper-button-prev:hover {background-position: 0 -46px;background-size: 100%}#certify .swiper-button-next {right: -30px;width: 45px;height: 45px;background: url(../images/wm_button_icon.png) no-repeat;background-position: 0 -93px;background-size: 100%;}#certify .swiper-button-next:hover {background-position: 0 -139px;background-size: 100%}</style>
</head><body><div id="certify"><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><img src="data:images/certify01.png" /></div><div class="swiper-slide"><img src="data:images/certify02.png" /></div><div class="swiper-slide"><img src="data:images/certify03.png" /></div><div class="swiper-slide"><img src="data:images/certify04.png" /></div><div class="swiper-slide"><img src="data:images/certify05.png" /></div></div></div><div class="swiper-pagination"></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div></div><script>var certifySwiper = new Swiper('#certify .swiper-container', {watchSlidesProgress: true,slidesPerView: 'auto',centeredSlides: true,loop: true, autoplay: true,loopedSlides: 5,autoplay: true,navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},pagination: {el: '.swiper-pagination',//clickable :true,},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>
</body></html>