swiper的hover切换

### 实现 Swiper 鼠标悬停切换效果 为了实现在 Swiper 轮播图中当鼠标悬停时停止自动播放的效果，可以采用事件监听的方式处理 `mouseenter` 和 `mouseleave` 事件。具体来说，在 JavaScript 或 jQuery 中绑定这两个事件到 Swiper 容器上，并调用相应的 API 方法来控制 autoplay 的启停。 对于 React 应用程序而言，可以在组件挂载完成后初始化 Swiper 并配置好所需的选项[^1]： ```javascript import Swiper from 'swiper'; class Banner extends React.Component { constructor(props){ super(props); this.bannerSwiper = null; } componentDidMount(){ this.bannerSwiper = new Swiper('#swiper-banner', { loop: true, autoplay: { delay: 2500, disableOnInteraction: false }, // other options... }); document.querySelector('.swiper-container').addEventListener('mouseenter', ()=>{ this.bannerSwiper.autoplay.stop(); }); document.querySelector('.swiper-container').addEventListener('mouseleave', ()=>{ this.bannerSwiper.autoplay.start(); }); } render() { return ( <div id="swiper-banner"> {/* slides content */} </div> ); } } ``` 而在 Vue.js (版本2.x)项目里，如果遇到 CSS 过渡属性无法通过样式表正常应用的情况，可以直接操作 DOM 元素的 style 属性来进行调整[^2]: ```javascript export default { mounted(){ setTimeout(() => { this.$nextTick(() => { const swiperInstance = this.$refs.mySwiper.$swiper; swiperInstance.$wrapperEl[0].style['transition-timing-function'] = 'linear'; swiperInstance.el.addEventListener('mouseenter', () => { swiperInstance.autoplay.stop(); }); swiperInstance.el.addEventListener('mouseleave', () => { swiperInstance.autoplay.start(); }); }) }, 100); } }; ``` 另外一种更为简洁的做法是在创建 Swiper 实例之后立即为其容器添加 mouseenter 和 mouseleave 事件处理器[^3]： ```javascript var mySwiper = new Swiper ('.swiper-container', { direction: 'horizontal', loop: true, // 如果需要分页器 pagination: '.swiper-pagination', // 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // 自动播放设置 autoplay: { delay: 3000, stopOnLastSlide: false, disableOnInteraction: false } }); // 添加悬停逻辑 $('.swiper-container').on('mouseenter', function () { mySwiper.autoplay.stop(); }).on('mouseleave', function () { mySwiper.autoplay.start(); }); ``` 上述代码片段展示了不同框架下实现相同功能的具体方式。无论是哪种情况，核心思路都是相同的——利用 Swiper 提供的 API 来响应用户的交互行为并作出适当反应。