当鼠标在 Bxslider 的寻呼机上时，我想更改照片

Question

我不想单击 bxSlider 寻呼机中的圆圈，而是想用鼠标悬停。但我不知道该怎么办。我看到了源代码并从 click 更改为 hover，例如在这部分 this site.

来自

slider.pagerEl.on('click', 'a', clickPagerBind);

到

slider.pagerEl.on('hover', 'a', clickPagerBind);

然而，它没有用。你能给我一些建议吗？

BxSlider v4.1.2

Answer 1

所有细节都在源代码中进行了注释。如果您使用由 CDN 托管的 bxslider.min.js（如本演示），请勿使用相应的 bxslider.css 文件。 CDN 无法正确处理资产（或者我可能没有）。相反，在您自己的服务器中托管 CSS 文件和资产（即 loader.gif、controls.png）。

片段

$(function() {

  // Instantiate bxSlider to a var bx
  var bx = $('.bxSlider').bxSlider({

    /* Do not use useCSS option. bxSlider
    | does not handle animation that it doesn't 
    | handle itself very well.
    */
    useCSS: false
  });

  // Delegate mouseenter/leave events to .bx-pager-link
  $('.bx-pager-link').on('mouseenter mouseleave', function(e) {

    // Prevent <a> from jumping default behavior
    e.preventDefault();

    /* Get the data-slide-index attribute value
    | and store it in var goTo.    
    | Next, use the bxSlider method goToSlide() 
    | to  move slides to the designated position
    | determined by the value of var goTo
    */
    var goTo = $(this).data('slide-index');
    bx.goToSlide(goTo);
  });
});

/* Use bxslider.css for styles */

/* This demo has minimal styling 
| because CDN doesn't handle 
| assets correctly and for
| emphasis of specific controls
*/

img {
  display: block;
  margin: 0 auto;
  width: 200px;
  height: 200px;
}
.bx-pager-item {
  display: table-cell;
  padding: 0 10px;
}
.bx-pager-link {
  background: rgba(255, 0, 0, .5);
  color: rgba(255255, 255, .5);
  border-radius: 50%;
  width: 1.5em;
  height: 1.5em;
  display: inline-block;
  padding: 5px;
  text-align: center;
  font-size: 1.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script>


<ul class='bxSlider'>
  <li>
    <img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png'>
  </li>
  <li>
    <img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png'>
  </li>
  <li>
    <img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png'>
  </li>
  <li>
    <img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png'>
  </li>
</ul>

当鼠标在 Bxslider 的寻呼机上时，我想更改照片

I'd like to change photos when mouse is on the pager of Bxslider

jquery

bxslider

片段