Javascript 带有自定义寻呼机的bx滑块在悬停幻灯片之间移动时出现问题_Javascript_Jquery_Bxslider

Javascript 带有自定义寻呼机的bx滑块在悬停幻灯片之间移动时出现问题

javascript jquery

Javascript 带有自定义寻呼机的bx滑块在悬停幻灯片之间移动时出现问题,javascript,jquery,bxslider,Javascript,Jquery,Bxslider,所以，我使用的是自定义幻灯片。我制作了一个定制的寻呼机，因为要求幻灯片位于作为寻呼机的几个内容块的中心，并且我需要在幻灯片的不同侧面设置项目。幻灯片将自动旋转，直到用户将鼠标悬停在内容块上，内容块将移动到并冻结与该项目相关的幻灯片原型：我几乎让它工作了。在我上面的例子中，它可以短暂地工作，但如果我在项目之间快速移动鼠标，整个事情就会冻结。如果我将寻呼机的'on'事件更改为'click'所有操作都按预期进行，但我需要在您将鼠标悬停在某个项目上时执行，而不是单击。这让我相信，问题与在滑块从第一

所以，我使用的是自定义幻灯片。我制作了一个定制的寻呼机，因为要求幻灯片位于作为寻呼机的几个内容块的中心，并且我需要在幻灯片的不同侧面设置项目。幻灯片将自动旋转，直到用户将鼠标悬停在内容块上，内容块将移动到并冻结与该项目相关的幻灯片

原型：

我几乎让它工作了。在我上面的例子中，它可以短暂地工作，但如果我在项目之间快速移动鼠标，整个事情就会冻结。如果我将寻呼机的'on'事件更改为'click'所有操作都按预期进行，但我需要在您将鼠标悬停在某个项目上时执行，而不是单击。这让我相信，问题与在滑块从第一个项目移动完之前将鼠标悬停在另一个项目上有关，然后事情就会破裂

我当前的鼠标事件如下所示：

$('#slide-container .pager-list a').on('mouseenter', function() {
    slider.goToSlide(this.getAttribute('data-slide-index'));
    slider.stopAuto();
});

$('#slide-container .pager-list a').on('mouseleave', function() {
    slider.startAuto();
});

*编辑：jQuery的其余部分：

var slider = $('.bxslider').bxSlider({
    pagerCustom: '#slide-container',
    slideWidth: 400,
    controls: false,
    auto: true,
    autoHover: true,
    pause: 2000
});

slider.bxSlider();

如果这就是问题所在，在第一次滑动操作完成之前，我可以如何防止幻灯片移动？

相关变更

删除

.bxSlider（）

的额外实例化，在

ul.bxSlider

删除

pagerCustom

选项，因为它希望单击链接（该OP请求明确排除该行为）

添加

pager:false

。我们将依靠jQuery事件委托来调用bxSlider方法

缩小鼠标事件的选择器范围：

   $('.pager').on(MOUSEEVENT, 'a', function() {...

将

mouseenter

事件更改为

mouseover

事件

mouseenter

仅涵盖鼠标越过元素边界时的情况，而

mouseeover

则涵盖边界跨越和指针在所述元素内的持续时间

更改：

  ...(this.getAttribute('data-slide-index')) // Result is a String ex. "1"<br>

可选更改

每个链接

href

属性值都设置为

#/

，以防止





























变量滑块=$（'.bxslider'）.bxslider({
滑动宽度：400，
控件：false，
auto:true，//应设置为true
自动悬停：正确，
暂停：2000年，
传呼机：错误
});
$（'.pager'）。on（'mouseover'，'a'，function（）{
slider.goToSlide（$（this.data（'slide-index'））；
slider.stopAuto（）；
});
$（'.pager'）.on（'mouseleave'，'a'，function（））{
slider.startAuto（）；
});

需要jQuery的其余部分，如

bxSlider（）

实例化？其余的代码在codepen链接中，但为了更好的可视性在这里添加了它。不用担心，请看。非常感谢，我非常感谢您的帮助！需要jQuery的其余部分，如

bxSlider（）

实例化吗？其余的代码在codepen链接中，但为了更好的可视性在这里添加了它。不用担心，请看。非常感谢，我非常感谢您的帮助！非常感谢。我真不敢相信我是想传递一个字符串和一个数字。。。这仍然不时困扰着我。还感谢您建议删除“pagerCustom”，出于某种原因，我认为如果我正在做任何自定义寻呼机，我需要它，但那是在我实际开始任何鼠标事件之前。现在我把所有的事情都看成一个整体，这就很好地解释了为什么不需要它。我真的很感谢你的详细回答，我今天肯定学到了一些东西！我很高兴能帮上忙。快乐编码！非常感谢。我真不敢相信我是想传递一个字符串和一个数字。。。这仍然不时困扰着我。还感谢您建议删除“pagerCustom”，出于某种原因，我认为如果我正在做任何自定义寻呼机，我需要它，但那是在我实际启动任何一个m之前