css 部分

<style>
      * {margin: 0;padding: 0;list-style: none;border: none;}
    #box { width: 350px; height: 350px;margin: 100px 0 0 100px;position: relative;}
    #small_box {  width: 100%;  height: 100%; border: 1px solid #cccccc; box-sizing: border-box; position: relative; }
    #small_box img { width: 100%;  height: 100%;  }
    #mask { width: 100px;   height: 100px;  background-color: rgba(255, 255, 0, .4); position: absolute;  left: 0; top: 0; cursor: move; display: none; }
    #big_box { width: 600px; height: 600px;  border: 1px solid #CCCCCC;  position: absolute; left: 360px;  top: 0; overflow: hidden; display: none;  }
    #big_box img{ position: absolute;  left: 0;  top: 0; }
    #list {  margin: 20px 0 0 100px; }
    #list ul li { float: left; margin: 5px; cursor: pointer;}
</style>

html部分

<div id="box">
  <div id="small_box">
      <img src="images/pic001.jpg" alt="">
      <span id="mask"></span>
  </div>
  <div id="big_box">
      <img src="images/pic01.jpg" alt="">
  </div>
</div>
<div id="list">
  <ul>
      <li><img src="images/pic0001.jpg" alt=""></li>
      <li><img src="images/pic0002.jpg" alt=""></li>
      <li><img src="images/pic0003.jpg" alt=""></li>
      <li><img src="images/pic0004.jpg" alt=""></li>
  </ul>
</div>

JavaScript部分

<script>
  window.addEventListener('load',function () {
    // 1、获取标签
    var s_box = document.getElementById('box').children[0];
    var b_box = document.getElementById('box').children[1];
    var mask = s_box.children[1];
    var b_img = b_box.children[0];
    var lists = document.getElementById('list').querySelectorAll('li');

    // 2、监听鼠标进入小盒子
    s_box.addEventListener('mouseover', function (e) {
       // 2.1、显示隐藏内容
       mask.style.display = 'block';
      b_box.style.display = 'block';
      //  2.2、监听鼠标移动
      this.addEventListener('mousemove',function (en1) {
        let e = en1 || window.event;
        //    2.3、求出鼠标的坐标
        let poinX = e.pageX - this.parentNode.offsetLeft - mask.offsetWidth * 0.5;
        let poinY = e.pageY - this.parentNode.offsetTop - mask.offsetHeight * 0.5;
      //  2.4、边检检测
      // x轴最小边界 左
      if (poinX < 0) poinX = 0;
      // x轴最大边界 右
      if (poinX > (s_box.offsetWidth - mask.offsetWidth - 2)) poinX = s_box.offsetWidth - mask.offsetWidth - 2;
      // y轴最小边界 上
      if (poinY < 0) poinY = 0;
      // y轴最大边界 下
      if (poinY > (s_box.offsetHeight - mask.offsetHeight - 2)) poinY = s_box.offsetHeight - mask.offsetHeight - 2;

      //  2.5、让放大镜走起来
      mask.style.left = poinX + 'px';
      mask.style.top = poinY + 'px';

    //  2.5、让大盒子走起来 鼠标的坐标 除以 （小盒子的宽度 / 大盒子的宽度 ）
    b_img.style.left = -poinX / (s_box.offsetWidth / b_box.offsetWidth) + 'px';
    b_img.style.top = -poinY / (b_box.offsetHeight / b_box.offsetHeight) + 'px';
  })
})
//  3、监听鼠标离开小盒子
s_box.addEventListener('mouseout', function (e) {
  // 3.1、隐藏显示内容
  mask.style.display = 'none';
  b_box.style.display = 'none';
})
//  4、遍历图片列表
for (let i = 0; i < lists.length; i++) {
  (function () {
    let li = lists[i]
    li.addEventListener('click', function () {
    s_box.children[0].src = 'images/pic00' + (i + 1) + '.jpg';
    b_img.src = 'images/pic00' + (i + 1) + '.jpg';
  })})(i)
 }
})
</script>

以上代码部分ok, 图片路径请根据自己的图片路径调整.