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

最新推荐文章于 2024-04-30 10:43:36 发布

hepei_i

最新推荐文章于 2024-04-30 10:43:36 发布

阅读量9.9k

点赞数 13

分类专栏： JavaScript 文章标签： JavaScript Swiper 轮播阶梯

本文链接：https://blog.csdn.net/qq_41787619/article/details/94737291

版权

JavaScript 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

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="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实例，大致使用方法为：

<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="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>

hepei_i

关注

13
点赞
踩
59

收藏

觉得还不错? 一键收藏
7
评论
swiper横向轮播——阶梯式滚动轮播

Swiper(Swipermaster)是目前应用较广泛的移动端网页触摸内容滑动js插件，是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。在工作的过程中遇到需要实现一个阶梯式的轮播效果，思索后决定使用swiper来解决这个问题。需要实现的效果大致如下图。一、加载swiper插件，需要用到的有...
复制链接

扫一扫