在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();
};
}
这里需要注意的是
好啦,今天的学习到这就结束咯,祝大家周末愉快🌴 拜拜啦~