相关更改

Question

因此，我正在使用bx slider plugin进行自定义幻灯片演示。我制作了一个自定义的寻呼机，因为幻灯片的要求是位于要用作寻呼机的几个内容块的中心，并且我需要将这些项目放在幻灯片的不同侧面。幻灯片将自动旋转，直到用户将鼠标悬停在一个内容块上为止，该内容块将移动并冻结与该项目相关的幻灯片。

原型： https://codepen.io/Denzy/pen/OqBXxq

我差不多可以正常工作。在上面的示例中，它短暂地起作用，但是如果我在项目之间快速移动鼠标，整个过程就会冻结。如果我将寻呼机的'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();

如果这是问题所在，我该怎么做才能阻止幻灯片在第一个滑动动作完成之前移动？

Answer 1

相关更改

删除额外的.bxSlider()实例化，您只需在ul.bxslider上添加一个实例
删除pagerCustom选项，因为它将期望单击链接（该OP要求显式排除该行为）。
添加pager: false。我们将依靠jQuery事件委托来调用bxSlider方法。

缩小鼠标事件的选择器：

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

将mouseenter事件更改为mouseover事件。 mouseenter仅涵盖鼠标越过元素边界的时间，而mouseover涵盖越界和指针在该元素内的持续时间。

更改：

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

至：

 ...($(this).data('slide-index')) // Result is a Number ex. 1

可选更改

每个链接href的属性值都设置为#/，这可以防止<a> 跳转行为。
每个文本的<img> URL参数已更改为以下模式：
```
&text=Slide%20N
```
%20 =空格， N = 1到6的数字

演示

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" rel="stylesheet">
  <style>
    ul {
      list-style: none;
    }
    
    li {
      padding: 20px 0;
    }
    
    .active {
      color: red;
    }
    
    a {
      color: #fff;
      padding: 10px;
      background-color: #64758a;
    }
    
    a:hover {
      color: red;
    }
  </style>
</head>

<body>
  <main class="slide-container">
    <ul class="pager">
      <li> <a data-slide-index="0" href="#/">Slide 1</a>
      </li>
      <li> <a data-slide-index="1" href="#/">Slide 2</a>
      </li>
      <li> <a data-slide-index="2" href="#/">Slide 3</a>
      </li>
    </ul>
    <ul class="bxslider">
      <li>
        <img src="http://placehold.it/800x250/5E7074/FFFFFF&text=Slide%201" />
      </li>
      <li>
        <img src="http://placehold.it/800x250/5E7074/FFFFFF&text=Slide%202" />
      </li>
      <li>
        <img src="http://placehold.it/800x250/5E7074/FFFFFF&text=Slide%203" />
      </li>
      <li>
        <img src="http://placehold.it/800x250/5E7074/FFFFFF&text=Slide%204" />
      </li>
      <li>
        <img src="http://placehold.it/800x250/5E7074/FFFFFF&text=Slide%205" />
      </li>
      <li>
        <img src="http://placehold.it/800x250/5E7074/FFFFFF&text=Slide%206" />
      </li>
    </ul>
    <ul class="pager">
      <li> <a data-slide-index="3" href="#/">Slide 4</a>
      </li>
      <li> <a data-slide-index="4" href="#/">Slide 5</a>
      </li>
      <li> <a data-slide-index="5" href="#/">Slide 6</a>
      </li>
    </ul>
  </main>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
  <script>
    var slider = $('.bxslider').bxSlider({
      slideWidth: 400,
      controls: false,
      auto: true, //should be set to true
      autoHover: true,
      pause: 2000,
      pager: false
    });

    $('.pager').on('mouseover', 'a', function() {
      slider.goToSlide($(this).data('slide-index'));
      slider.stopAuto();
    });

    $('.pager').on('mouseleave', 'a', function() {
      slider.startAuto();
    });
  </script>
</body>

</html>

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

1 个答案:

相关更改

可选更改

演示