owlCarousel插件，鼠标悬停在原点导航时切换图片

Question

鼠标悬停在分页器上就会图片切换，鼠标移除之后轮播图又进行轮播，利用owlCarousel插件如何实现了

Answer 1

如果您使用的是 owlCarousel 插件，可以通过修改插件的 onMouseEnter 和 onMouseLeave 回调函数实现鼠标悬停时暂停自动轮播、鼠标移开后恢复自动轮播的效果，从而实现在分页器上悬停时切换图片的效果。

在初始化插件时，通过传入 onMouseEnter 和 onMouseLeave 回调函数，对鼠标移入和移出事件进行处理。例如：

// HTML 代码
<div class="owl-carousel">
  <div class="item"><img src="1.jpg" alt=""></div>
  <div class="item"><img src="2.jpg" alt=""></div>
  <div class="item"><img src="3.jpg" alt=""></div>
</div>

// JavaScript 代码
$('.owl-carousel').owlCarousel({
  items: 1,
  autoplay: true,
  autoplayTimeout: 3000,
  autoplayHoverPause: true,
  dots: true,
  onMouseEnter: () => {
    $('.owl-carousel').trigger('stop.owl.autoplay')
  },
  onMouseLeave: () => {
    $('.owl-carousel').trigger('play.owl.autoplay')
  }
});

其中，onMouseEnter 回调函数在鼠标悬停时调用，利用 $('.owl-carousel').trigger('stop.owl.autoplay') 方法停止自动轮播；onMouseLeave 回调函数在鼠标移开时调用，利用 $('.owl-carousel').trigger('play.owl.autoplay') 方法恢复自动轮播。

修改 onMouseEnter 和 onMouseLeave 回调函数的具体实现方式可能因 owlCarousel 版本和应用场景而有所区别，建议您在使用插件时查阅官方文档或相关示例代码。