swiper滑动切换变换样式，实时显示当前索引

最新推荐文章于 2023-04-03 20:51:31 发布

judy_1118

最新推荐文章于 2023-04-03 20:51:31 发布

阅读量2k

点赞数

分类专栏： swiper 文章标签： swiper

本文链接：https://blog.csdn.net/judykang123/article/details/110549408

版权

swiper 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

需求

参加活动送的车模型有一个展示页，展示页需要可以竖着滑动查看，当前查看的那个车在最中心且背景颜色、车的大小、文字颜色发生改变。

下面的例子是做完后又在swiper官网的案例中改的，我一般在项目里实现成功后都会另外写一个可以实现功能的小demo作为总结。因为单拿出来后缕了逻辑，加深了印象，下次再用也方便。

效果

在这里插入图片描述

资源

我是在 · swiper官网–获取swiper–下载swiper–（下载后的文件里的）swiper-master–demos–400-zoom.html · 里面修改的

完整代码

html里没什么特别的，就是七个图片加文字
css里就是给数字加一下颜色和阴影，便于区分
js都在注释里了
小提示：复制粘贴看效果前需要改一下css和js引入的路径以及图片的路径

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>Swiper demo</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

		<!-- Link Swiper's CSS -->
		<link rel="stylesheet" href="../package/swiper-bundle.min.css">

		<!-- Demo styles -->
		<style>
			html,
			body {
				position: relative;
				height: 100%;
			}

			body {
				background: #000;
				font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
				font-size: 14px;
				color: #000;
				margin: 0;
				padding: 0;
			}

			.swiper-container {
				width: 100%;
				height: 100%;
			}

			.swiper-slide {
				overflow: hidden;
				color: #fff;
				font-size: 50px;
				font-weight: bold;
				text-shadow: 2px 2px 8px yellow;
			}
		</style>
	</head>

	<body>
		<!-- Swiper -->
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<div class="swiper-zoom-container">
						<img src="./images/nature-1.jpg">1
					</div>
				</div>
				<div class="swiper-slide">
					<div class="swiper-zoom-container">
						<img src="./images/nature-2.jpg">2
					</div>
				</div>
				<div class="swiper-slide">
					<div class="swiper-zoom-container">
						<img src="./images/nature-3.jpg">3
					</div>
				</div>
				<div class="swiper-slide">
					<div class="swiper-zoom-container">
						<img src="./images/nature-1.jpg">4
					</div>
				</div>
				<div class="swiper-slide">
					<div class="swiper-zoom-container">
						<img src="./images/nature-2.jpg">5
					</div>
				</div>
				<div class="swiper-slide">
					<div class="swiper-zoom-container">
						<img src="./images/nature-3.jpg">6
					</div>
				</div>
				<div class="swiper-slide">
					<div class="swiper-zoom-container">
						<img src="./images/nature-1.jpg">7
					</div>
				</div>
			</div>
			<!-- Add Pagination -->
			<div class="swiper-pagination swiper-pagination-white"></div>
			<!-- Add Navigation -->
			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>
		</div>

		<!-- Swiper JS -->
		<script src="../package/swiper-bundle.js"></script>
		<script src="./jquery-3.5.1.js"></script>

		<!-- Initialize Swiper -->
		<script>
			var swiper = new Swiper('.swiper-container', {
				loop: true, //因为本身数量不多,想要选中的内容在中间,所以需要循环
				direction: 'vertical', //方向:书香
				speed: 500, //速度
				spaceBetween: 14, //每个swiper-slide相隔的距离
				slidesPerView: 8, //显示一屏有几个,根据这个的值,显示在中心的那个swiper-slide的位置也会发生改变
				centeredSlides: true, //选中的swiper-slide显示在中间
				slideToClickedSlide: true, //可以点击切换

				navigation: { //左右箭头
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				},
				on: {
					slideChangeTransitionStart: function() { //切换的时候获取到当前是第几个
						console.log('start :  ' + this.activeIndex);
						SwiperChange(this.activeIndex);
					},
					progress: function(swiper, progress) {
						//在拖拽过程中未松手时也要判断当前的索引值
						//以为是循环的状态,所以索引值不固定
						let nowProgress = this.progress;
						console.log(nowProgress);
						if (nowProgress > 0.149 && nowProgress < 0.199) {
							activeIndex = 4;
						} else if (nowProgress > 0.199 && nowProgress < 0.249) {
							activeIndex = 5;
						} else if (nowProgress > 0.249 && nowProgress < 0.299) {
							activeIndex = 6;
						} else if (nowProgress > 0.299 && nowProgress < 0.349) {
							activeIndex = 7;
						} else if (nowProgress > 0.349 && nowProgress < 0.399) {
							activeIndex = 8;
						} else if (nowProgress > 0.399 && nowProgress < 0.449) {
							activeIndex = 9;
						} else if (nowProgress > 0.449 && nowProgress < 0.499) {
							activeIndex = 10;
						} else if (nowProgress > 0.499 && nowProgress < 0.549) {
							activeIndex = 11;
						} else if (nowProgress > 0.549 && nowProgress < 0.6) {
							activeIndex = 12;
						} else if (nowProgress > 0.6 && nowProgress < 0.649) {
							activeIndex = 13;
						} else if (nowProgress > 0.649 && nowProgress < 0.7) {
							activeIndex = 14;
						} else if (nowProgress > 0.7 && nowProgress < 0.749) {
							activeIndex = 15;
						} else if (nowProgress > 0.749 && nowProgress < 0.799) {
							activeIndex = 16;
						} else if (nowProgress > 0.799 && nowProgress < 0.85) {
							activeIndex = 17;
						}

						SwiperChange(activeIndex);
					},
				}
			});
			//款式页切换时的效果
			function SwiperChange(activeIndex) {
				$('.swiper-slide').css({
					'height': '70px',
					'color': '#fff',
					'textShadow': '2px 2px 8px yellow'
				});

				$('.swiper-slide:eq(' + activeIndex + ')').css({
					'height': '120px',
					'color': '#fff',
					'textShadow': '2px 2px 8px red'
				});
			}
		</script>
	</body>

</html>

judy_1118

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
swiper滑动切换变换样式，实时显示当前索引

需求参加活动送的车模型有一个展示页，展示页需要可以滑动查看，并且查看的那个车在最中心且背景颜色、车的大小、文字颜色发生改变。下面的例子是做完后又在swiper官网的案例中改的，我一般都不会直接用给公司做的项目，另外写一个可以实现功能的小demo作为总结。一个是不会产生什么纠纷，另一个就是单拿出来后加深了印象，下次再用也方便效果...
复制链接

扫一扫