鼠标悬停在分页器上就会图片切换,鼠标移除之后轮播图又进行轮播,利用owlCarousel插件如何实现了
如果您使用的是 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 版本和应用场景而有所区别,建议您在使用插件时查阅官方文档或相关示例代码。