ovsexia-xzoom
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="shortcut icon" href="#"/>
<script src="https://cdn.staticfile.org/jquery/1.10.1/jquery.min.js"></script>
<link href="css/xzoom.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/xzoom.min.js"></script>
<title>Xzoom</title>
</head>

<body>

<div style="width:1000px; margin:0 auto; padding:50px 0;">
  <h2>鼠标经过切换、缩略图卷轴显示</h2>
  <!--------------demo1-------------->
  <div class="xzoom1">
    <div class="xzoom_show"><img src="https://images.gitee.com/uploads/images/2021/0606/092147_7df7fee2_1402003.jpeg" data-xzoom="https://images.gitee.com/uploads/images/2021/0606/092125_2e3d3bf2_1402003.jpeg" /></div>

    <div class="xzoom_thumb">
      <div class="xzoom_thumbin">
        <ul>
          <li><img src="https://images.gitee.com/uploads/images/2021/0606/092147_7df7fee2_1402003.jpeg" data-xzoom="https://images.gitee.com/uploads/images/2021/0606/092125_2e3d3bf2_1402003.jpeg" /></li>
          <li><img src="https://images.gitee.com/uploads/images/2021/0606/092324_bc7e7a27_1402003.jpeg" data-xzoom="https://images.gitee.com/uploads/images/2021/0606/092312_3b618ab4_1402003.jpeg" /></li>
          <li><img src="https://images.gitee.com/uploads/images/2021/0606/092438_437f2b69_1402003.jpeg" data-xzoom="https://images.gitee.com/uploads/images/2021/0606/092408_6f377731_1402003.jpeg" /></li>
          <li><img src="https://images.gitee.com/uploads/images/2021/0606/092515_f465a6ab_1402003.jpeg" data-xzoom="https://images.gitee.com/uploads/images/2021/0606/092500_1ca01afb_1402003.jpeg" /></li>
          <li><img src="https://images.gitee.com/uploads/images/2021/0606/092538_3813d0ea_1402003.jpeg" data-xzoom="https://images.gitee.com/uploads/images/2021/0606/092528_2708681b_1402003.jpeg" /></li>
        </ul>
      </div>
      <div class="xzoom_prev"></div>
      <div class="xzoom_next"></div>
    </div>
  </div>

  <script type="text/javascript">
  $('.xzoom1').xzoom({
    width: 400,
    height: 267,
    zwidth: 640,
    thumbs: 4,
    scroll: true,
  });
  </script>
  <!--------------demo1-------------->

  <br /><br /><br /><br /><br />

  <h2>点击切换、缩略图列表显示</h2>
  <!--------------demo2-------------->
  <div class="xzoom2">
    <div class="xzoom_show"><img src="https://images.gitee.com/uploads/images/2021/0606/092147_7df7fee2_1402003.jpeg" data-xzoom="https://images.gitee.com/uploads/images/2021/0606/092125_2e3d3bf2_1402003.jpeg" /></div>

    <div class="xzoom_thumb">
      <div class="xzoom_thumbin">
        <ul>
          <li><img src="https://images.gitee.com/uploads/images/2021/0606/092147_7df7fee2_1402003.jpeg" data-xzoom="https://images.gitee.com/uploads/images/2021/0606/092125_2e3d3bf2_1402003.jpeg" /></li>
          <li><img src="https://images.gitee.com/uploads/images/2021/0606/092324_bc7e7a27_1402003.jpeg" data-xzoom="https://images.gitee.com/uploads/images/2021/0606/092312_3b618ab4_1402003.jpeg" /></li>
          <li><img src="https://images.gitee.com/uploads/images/2021/0606/092438_437f2b69_1402003.jpeg" data-xzoom="https://images.gitee.com/uploads/images/2021/0606/092408_6f377731_1402003.jpeg" /></li>
          <li><img src="https://images.gitee.com/uploads/images/2021/0606/092515_f465a6ab_1402003.jpeg" data-xzoom="https://images.gitee.com/uploads/images/2021/0606/092500_1ca01afb_1402003.jpeg" /></li>
          <li><img src="https://images.gitee.com/uploads/images/2021/0606/092538_3813d0ea_1402003.jpeg" data-xzoom="https://images.gitee.com/uploads/images/2021/0606/092528_2708681b_1402003.jpeg" /></li>
          <li><img src="https://images.gitee.com/uploads/images/2021/0606/092147_7df7fee2_1402003.jpeg" data-xzoom="https://images.gitee.com/uploads/images/2021/0606/092125_2e3d3bf2_1402003.jpeg" /></li>
          <li><img src="https://images.gitee.com/uploads/images/2021/0606/092324_bc7e7a27_1402003.jpeg" data-xzoom="https://images.gitee.com/uploads/images/2021/0606/092312_3b618ab4_1402003.jpeg" /></li>
          <li><img src="https://images.gitee.com/uploads/images/2021/0606/092438_437f2b69_1402003.jpeg" data-xzoom="https://images.gitee.com/uploads/images/2021/0606/092408_6f377731_1402003.jpeg" /></li>
        </ul>
      </div>
    </div>
  </div>

  <script type="text/javascript">
  $('.xzoom2').xzoom({
    width: 400,
    height: 267,
    zwidth: 640,
    zoom: 3,
    thumbs: 4,
    thumbPad: 5,
    thumbType: 'click',
    thumbBor: 'red',
  });
  </script>
  <!--------------demo2-------------->
</div>

</body>
</html>