swiper鼠标移动到分页器(小圆点)上,内容随之改变

本文介绍了如何使用 Swiper JS 框架创建一个轮播图,并详细讲解了如何配置分页器,使得当鼠标悬停在分页器上时,轮播内容能自动切换。通过添加 `clickable` 属性和监听鼠标悬停事件,实现了交互式的轮播效果。这是一个适用于前端开发的实用技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在swiper使用时,怎么做到鼠标移动到分页器上,内容随之改变呢?让我们一起去看看吧
我们先来看一下一个简单的轮播📧

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
		<style>
			html,
			body {
				position: relative;
				height: 100%;
			}
			
			body {
				font-size: 14px;
				color: #000;
				margin: 0;
				padding: 0;
			}
			
			.swiper {
				width: 100%;
				height: 100%;
			}
			
			.swiper-slide {
				text-align: center;
				font-size: 18px;
				background: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		</style>
	</head>

	<body>
		<div class="swiper mySwiper">
			<div class="swiper-wrapper">
				<div class="swiper-slide">第一页内容</div>
				<div class="swiper-slide">第二页内容</div>
				<div class="swiper-slide">第三页内容</div>
				<div class="swiper-slide">第四页内容</div>
			</div>
			<div class="swiper-pagination"></div>
		</div>

		Swiper JS
		<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		Initialize Swiper
		<script language="javascript">
			var mySwiper1 = new Swiper('.swiper', {
				pagination: {
					el: '.swiper-pagination',
					clickable: true, //必须设置,不然鼠标悬浮不会切换
				}
			})
		</script>
	</body>

</html>

现在,你的轮播图已经可以实现简单的切换和点击切换功能了,那么只要在js里添加以下代码,就可以实现鼠标悬浮内容随之改变的功能了

			//鼠标滑过pagination控制swiper切换
			for(i = 0; i < mySwiper1.pagination.bullets.length; i++) {
				mySwiper1.pagination.bullets[i].onmouseover = function() {
					this.click();
				};
			}

这里需要注意的是
在这里插入图片描述
好啦,今天的学习到这就结束咯,祝大家周末愉快🌴 拜拜啦~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值