xzoom.js 图片放大镜

<div class="xzoom">
  <div class="xzoom_show"><img src="images/01_lit.jpg" data-xzoom="images/01.jpg" /></div>

  <div class="xzoom_thumb">
    <div class="xzoom_thumbin">
      <ul>
        <li><img src="images/01_lit.jpg" data-xzoom="images/01.jpg" /></li>
        <li><img src="images/02_lit.jpg" data-xzoom="images/02.jpg" /></li>
        <li><img src="images/03_lit.jpg" data-xzoom="images/03.jpg" /></li>
        <li><img src="images/04_lit.jpg" data-xzoom="images/04.jpg" /></li>
        <li><img src="images/05_lit.jpg" data-xzoom="images/05.jpg" /></li>
      </ul>
    </div>
    <div class="xzoom_prev"></div>
    <div class="xzoom_next"></div>
  </div>
</div>

<script>
$('.xzoom').xzoom({
  thumbs: 4,
  scroll: true,
});
</script>