标题--分页器--上下页的swiper案例

最新推荐文章于 2023-06-30 18:32:28 发布

闹闹没有闹

最新推荐文章于 2023-06-30 18:32:28 发布

阅读量347

点赞数

本文链接：https://blog.csdn.net/qq_41893686/article/details/116567752

版权

JavaScript 同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

html

13 篇文章 0 订阅

订阅专栏

css

6 篇文章 1 订阅

订阅专栏

版本号：Swiper 3.4.2


<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Swiper中文网基础演示(www.swiper.com.cn)</title>
	<link rel="stylesheet" href="./css/swiper.min.css">
	<script src="./js/swiper.min.js"></script>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.blue-slide {
			background: #4390EE;
		}

		.red-slide {
			background: #CA4040;
		}

		.orange-slide {
			background: #FF8604;
		}

		.swiper-slide {
			line-height: 300px;
			color: #fff;
			font-size: 36px;
			text-align: center;
		}

		.swiper-pagination {
			text-align: right !important;
		}

		.swiper-pagination-bullet {
			width: 20px;
			height: 20px;
			text-align: center;
			line-height: 20px;
			font-size: 12px;
			color: #000;
			opacity: 1;
			background: rgba(0, 0, 0, 0.2);
		}

		.swiper-pagination-bullet-active {
			color: #fff;
			background: #007aff;
		}

		.swiper-container {
			position: relative;
			--swiper-theme-color: #ff6600;
			/* 设置Swiper风格 */
			--swiper-navigation-color: #00ff33;
			/* 单独设置按钮颜色 */
			--swiper-navigation-size: 30px;
			/* 设置按钮大小 */
		}

		.swiper-title {
			position: absolute;
			min-width: 100px;
			bottom: 2%;
			left: 50%;
			transform: translateX(-50%);
			height: 20px;
			z-index: 9;
		}
	</style>
</head>

<body>
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide blue-slide">slider1</div>
			<div class="swiper-slide red-slide">slider2</div>
			<div class="swiper-slide orange-slide">slider3</div>
		</div>
		<!-- 分页器 -->
		<div class="swiper-pagination"></div>
		<div class="swiper-button-prev"></div>
		<!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
		<div class="swiper-button-next"></div>
		<!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
		<!-- 标题 -->
		<div class="swiper-title"></div>


	</div>
	<script type="text/javascript">
		// 获取对应的标题
		function getStatus(key) {
			var title = new Map([
				[1, {
					id: 1,
					title: "1今天天正好"
				}],
				[2, {
					id: 2,
					title: "2今天天正"
				}],
				[3, {
					id: 3,
					title: "3今天正好"
				}]
			])
			return title.get(key) ? title.get(key) : title.get(1)
		}


		var mySwiper = new Swiper('.swiper-container', {
			loop: true,
			autoplay: 3000,
			speed: 900,

			// 上一页/下一页
			prevButton: '.swiper-button-prev',
			nextButton: '.swiper-button-next',

			// 分页显示
			pagination: '.swiper-pagination',
			paginationType: 'bullets',
			paginationClickable: true,
			paginationBulletRender: function (swiper, index, className) {
				return '<span class="' + className + '">' + (index + 1) + '</span>';
			},
			// 键盘左右/鼠标中间滚动
			keyboardControl: true,
			mousewheelControl: true,
			mousewheelReleaseOnEdges: true, //当Swiper处于边缘位置时（第一个或最后一个slide），Swiper释放鼠标滚轮事件，鼠标可以控制页面滚动
			onInit: function (swiper) {		//初始化
				let text = getStatus(swiper.activeIndex)
				document.getElementsByClassName("swiper-title")[0].innerHTML = ` ${text.id}-- ${text.title}`
			}
		})
		//  标题刷新
		setInterval(() => {
			let index = mySwiper.realIndex + 1
			let text = getStatus(index)
			document.getElementsByClassName("swiper-title")[0].innerHTML = ` ${text.id}-- ${text.title}`
		}, 1000);
	</script>
</body>

</html>

闹闹没有闹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
标题--分页器--上下页的swiper案例

版本号：Swiper 3.4.2<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Swiper中文网基础演示(www.swiper.com.cn)</title> <link rel="stylesheet" href="./css/swiper.min.
复制链接

扫一扫