gpt4 book ai didi

javascript - bxslider 在鼠标悬停时停止自定义分页

转载 作者:行者123 更新时间:2023-12-03 07:53:58 26 4
gpt4 key购买 nike

我的网页上有一个 bxSlider。当鼠标悬停在自定义分页器上时,我试图停止 slider 。这是我的 html:

<ul id="slider">
<!-- Slide -->
<li class="slider-element">
<a href="'.$sliderLink.'">
<img src="'.$sliderImage.'">
<div class="slider-caption-wrapp">
<div class="slider-caption">'.$sliderTitle.'</div>
</div>
</a>
</li>
<!-- Slide -->
<!-- Slide -->
<li class="slider-element">
<a href="'.$sliderLink.'">
<img src="'.$sliderImage.'">
<div class="slider-caption-wrapp">
<div class="slider-caption">'.$sliderTitle.'</div>
</div>
</a>
</li>
<!-- Slide -->
</ul>
<!-- Paginator -->
<ul id="slider-paginate" class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
<li><a data-slide-index="'.$slideIndex++.'" href="'.$sliderLink.'"><span>'.$slideIndexShow++.'</span></a></li>
<li><a data-slide-index="'.$slideIndex++.'" href="'.$sliderLink.'"><span>'.$slideIndexShow++.'</span></a></li>
</ul>

这是我的 js;

// Main Slider
var slider = jQuery('#slider').bxSlider({
auto: true,
speed: 500,
delay: 5000,
autoHover: true,
stopAuto: false,
pagerCustom: '#slider-paginate'
});

这是我迄今为止尝试过的:

$(document).on('hover','#slider-paginate',function() {
slider.stopAuto();
slider.startAuto();
});

不幸的是,它不起作用。我缺少什么?我的 JavaScript 代码有什么问题?

当鼠标悬停在分页器元素上时如何停止 bxslider?

最佳答案

我自己找到了答案;

我使用了 2 个事件;

第一个用于hover,另一个用于mouseleave

解决方案:

$('#slider-paginate').hover(function(){
slider.stopAuto();
});
$('#slider-paginate').mouseleave(function(){
slider.startAuto();
});

关于javascript - bxslider 在鼠标悬停时停止自定义分页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34877628/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com