Question

我的网页上有bxSlider。当鼠标悬停在我的自定义分页器上时，我试图停止滑块。 这是我的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代码出了什么问题？

当鼠标悬停在paginator元素上时，如何停止bxslider？

Answer 1

我自己找到了答案;

我使用了2个事件;

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

解决方案：

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

bxslider停止鼠标悬停自定义分页

1 个答案: