마우스가 Bxslider의 호출기에있을 때 사진을 변경하고 싶습니다.

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