当鼠标在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）。

段

＆＃13;

＆＃13;

$(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);
  });
});

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;