JavaScript--Swiper自定义分页器

最新推荐文章于 2024-05-09 10:19:32 发布

祺简

最新推荐文章于 2024-05-09 10:19:32 发布

阅读量2.1k

点赞数 2

分类专栏： JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_45406850/article/details/123207337

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

图片是以背景显示的，图片上有一层遮罩，最上面是文字。分页器激活状态下是自定义的图片。代码比较容易进行删改，比如不想要遮罩或者文字可以直接删掉。

分页器的效果：
在这里插入图片描述

html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<!--这里引入swiper的css文件-->
		<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
	</head>
	<body>
	<!--从Swiper7开始，容器默认类名由'.swiper-container'变更为'.swiper'。-->
		<div class="swiper-container">
					<div class="swiper-wrapper">
						<!--一张图一个swiper-slide  DIV-->
						<!--data-swiper-autoplay 设置自动切换的时间间隔-->
						<div class="swiper-slide" data-swiper-autoplay="1800" style="background: url(image/banner/1.jpg) center;background-size: cover;">
							<div class="swiper-mask">
								<div class="swiper-text">
									<div class="swiper-txt">
										<p>文字显示</p>
									</div>
								</div>
							</div>
						</div>
						<div class="swiper-slide" data-swiper-autoplay="1800" style="background: url(image/banner/2.jpg) center;background-size: cover;">
							<div class="swiper-mask">
								<div class="swiper-text">
									<div class="swiper-txt">
										<p>文字显示</p>
									</div>
								</div>
							</div>
						</div>
						<div class="swiper-slide" data-swiper-autoplay="1800" style="background: url(image/banner/3.jpg) center;background-size: cover;">
							<div class="swiper-mask">
								<div class="swiper-text">
									<div class="swiper-txt">
										<p>文字显示</p>
									</div>
								</div>
							</div>
						</div>
						<div class="swiper-slide" data-swiper-autoplay="1800" style="background: url(image/banner/4.jpg) center;background-size: cover;">
							<div class="swiper-mask">
								<div class="swiper-text">
									<div class="swiper-txt">
										<p>文字显示</p>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!--是否需要分页器-->
					<div class="swiper-pagination"></div>
				</div>

		<!--引入jQuery文件-->
		<script src="js/common/jquery-1.12.4.min.js"></script>
		<!--引入swiper的js文件-->
		<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
		<!--初始化swiper-->
		<script>
			var mySwiper = new Swiper('.swiper-container', {
				spaceBetween: 10,//在slide之间设置距离（单位px）
				loop: true,//循环播放
				autoplay: true,//自动播放
				speed: 500,//播放速度
				autoplay: {
					disableOnInteraction: false, //用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。
				},
				grabCursor: true, //鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。
				//分页器
				pagination: {
					el: '.swiper-pagination',
					type: 'custom', //分页器类型 自定义
					clickable: true,//此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
					//自定义特殊类型分页器，当分页器类型设置为自定义时可用。
					renderCustom: function(swiper, current, total) {
						var customPaginationHtml = "";
						for(var i = 0; i < total; i++) {
							//判断哪个分页器此刻应该被激活 
							if(i == (current - 1)) {
								customPaginationHtml += '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
							} else {
								customPaginationHtml += '<span class="swiper-pagination-customs"></span>';
							}
						}
						return customPaginationHtml;
					},
				},
			})
			// 自定义分页器点击切换
			$(".swiper-pagination").on("click", "span", function() {
				var index = $(this).index();
				mySwiper.slideTo(index+1);
			})
		</script>
	</body>
</html>

css
样式可根据需要自行修改

.swiper-container {
	max-width: 100%;
	height: 600px;
	margin: 0 auto;
}
.swiper-slide {
	color: white;
	text-align: center;
}
.swiper-slide {
	width: 100%;
	height: 600px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover
}
.swiper-slide .swiper-mask {
	width: 100%;
	height: 100%;
}
.swiper-text {
	max-width: 100%;
	height: 600px;
}
.swiper-slide .swiper-text .swiper-txt {
	opacity: 1;
	width: 100%;
	margin: 0 auto;
	height: 600px;
	background-color: rgba(51, 51, 51, 0.5);
	/*文字设置了水平垂直居中*/
	display: flex;
	justify-content: center;
	align-items: center;
}
.swiper-slide .swiper-text p {
	font-size: 64px;
	font-weight: 600;
	color: #FFFFFF;
	margin: 0;
}
/*分页器*/
.swiper-pagination {
	position: absolute;
	top: 680px !important;
	/*原本的分页器是有自己的样式的 设置的是距离下边10px。根据自己的需要进行了修改*/
}
/*包裹自定义分页器的div的位置等CSS样式*/
.swiper-pagination-custom {
	bottom: 5%;
	left: 0;
	width: 100%;
	height: 20px;
	text-align: center;
}
/*自定义分页器的样式*/
.swiper-pagination-customs {
	width: 20px;
	height: 20px;
	display: inline-block;
	background: #000;
	opacity: .3;
	border-radius: 50%;/*设置圆角，此时分页器形状为圆形*/
	margin: 0 5px;
	outline: 0;
}
/*自定义分页器激活时的样式表现*/
.swiper-pagination-customs-active {
	width: 20px;
	height: 20px;
	opacity: 1;
	z-index: 100;
	background: url(../images/icon-25.svg) no-repeat;/*激活状态显示的是这里设置的图片*/
}

祺简

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JavaScript--Swiper自定义分页器

图片是以背景显示的，图片上有一层遮罩，最上面是文字。分页器激活状态下是自定义的图片。代码比较容易进行删改，比如不想要遮罩或者文字可以直接删掉。分页器的效果：html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8">  <link rel="stylesheet" href="https://unpkg.
复制链接

扫一扫