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

Myth丶恋晨 2021-12-16 08:07 1141阅读 0赞

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

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

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

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

### 引入swiper ###

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

<div id="certify">
    	<div class="swiper-container">
    		<div class="swiper-wrapper">
    			<div class="swiper-slide"><img src="images/certify01.png" /></div>
    			<div class="swiper-slide"><img src="images/certify02.png" /></div>
    			<div class="swiper-slide"><img src="images/certify03.png" /></div>
    			<div class="swiper-slide"><img src="images/certify04.png" /></div>
    			<div class="swiper-slide"><img src="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实例，大致使用方法为：

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

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

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

### 完整代码 ###

<!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="images/certify01.png" /></div>
    				<div class="swiper-slide"><img src="images/certify02.png" /></div>
    				<div class="swiper-slide"><img src="images/certify03.png" /></div>
    				<div class="swiper-slide"><img src="images/certify04.png" /></div>
    				<div class="swiper-slide"><img src="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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzg3NjE5_size_16_color_FFFFFF_t_70]: /images/20211214/a378559f7735423898c57f29b2b3226d.png
[Link 1]: https://www.swiper.com.cn/download/index.html
[CDN]: https://www.swiper.com.cn/cdn/index.html