以下几种方法可以使用
swiper插件实现
鼠标悬浮时停止轮播：
#### 方法一：使用jQuery事件绑定（适用于有jQuery环境）
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Swiper Example</title>
<!-- 引入
Swiper的CSS和JS文件 -->
<link rel="stylesheet" href="https://unpkg.com/
swiper/
swiper-bundle.min.css">
<script src="https://unpkg.com/
swiper/
swiper-bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="
swiper-container">
<div class="
swiper-wrapper">
<div class="
swiper-slide">Slide 1</div>
<div class="
swiper-slide">Slide 2</div>
<div class="
swiper-slide">Slide 3</div>
</div>
</div>
<script>
var my
Swiper = new
Swiper('.
swiper-container', {
autoplay: {
delay: 3000,
disableOnInteraction: false
}
});
//
鼠标移入停止自动滚动
$('.
swiper-slide').mouseenter(function() {
my
Swiper.autoplay.stop();
});
//
鼠标移出开始自动滚动
$('.
swiper-slide').mouseleave(function() {
my
Swiper.autoplay.start();
});
</script>
</body>
</html>
```
此方法通过jQuery的`mouseenter`和`mouseleave`事件来控制
Swiper的自动播放和停止，原理是当
鼠标进入`
swiper-slide`元素时，调用`my
Swiper.autoplay.stop()`停止自动播放；
鼠标离开时，调用`my
Swiper.autoplay.start()`恢复自动播放 [^2]。
#### 方法二：使用原生JavaScript事件绑定（适用于不使用jQuery的情况）
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Swiper Example</title>
<!-- 引入
Swiper的CSS和JS文件 -->
<link rel="stylesheet" href="https://unpkg.com/
swiper/
swiper-bundle.min.css">
<script src="https://unpkg.com/
swiper/
swiper-bundle.min.js"></script>
</head>
<body>
<div class="
swiper-container">
<div class="
swiper-wrapper">
<div class="
swiper-slide">Slide 1</div>
<div class="
swiper-slide">Slide 2</div>
<div class="
swiper-slide">Slide 3</div>
</div>
</div>
<script>
var my
Swiper = new
Swiper('.
swiper-container', {
autoplay: {
delay: 3000,
disableOnInteraction: false
}
});
my
Swiper.el.onmouseover = function(){
//
鼠标放上暂停轮播
my
Swiper.autoplay.stop();
};
my
Swiper.el.onmouseleave = function(){
my
Swiper.autoplay.start();
};
</script>
</body>
</html>
```
该方法使用原生JavaScript的`onmouseover`和`onmouseleave`事件来实现相同的功能。`my
Swiper.el`表示
Swiper实例的DOM元素，当
鼠标悬停在该元素上时，停止自动播放；
鼠标离开时，恢复自动播放 [^5]。
#### 注意事项
在使用上述方法时，要保证`my
Swiper.autoplay.stop()`和`my
Swiper.autoplay.start()`中的`my
Swiper`与初始化
Swiper时的变量名一致，这样才能正确控制对应的
Swiper实例的自动播放和停止 [^4]。
本文介绍使用Swiper插件在PC端进行分屏项目开发时可能遇到的两个常见问题：无法复制文本及点击易翻页，影响用户体验。通过在swiper-container上添加特定class（swiper-no-swiping），可以有效解决这些问题。
扫一扫
888
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
