思路

首先由主图，缩略图，大图三部分组成
当点击缩略图的时候，主图，大图跟着切换
当鼠标移入的时候，蒙版和大图显示，蒙版位置根据计算所得，还要处理边界问题
鼠标移出，蒙版和大图皆为隐藏功能

 <div class="container">
    <div class="left-img">
      <div class="mask"></div>
    </div>
    <div class="right-img"></div>
    <div class="img-list-wrapper">
      <ul class="img-list">
      </ul>
    </div>
  </div>

// 封装工具
// 选择一个元素
function $(selector) {
  return document.querySelector(selector)
}

// 选择多个元素
function $$(selector) {
  return document.querySelectorAll(selector)
}

var imgs = {
  small: ['imgA_1.jpg', 'imgB_1.jpg', 'imgC_1.jpg'],
  middle: ['imgA_2.jpg', 'imgB_2.jpg', 'imgC_2.jpg'],
  big: ['imgA_3.jpg', 'imgB_3.jpg', 'imgC_3.jpg']
}

var container = $('.container')
var smallImg = $('.img-list')
var middleImg = $('.left-img')
var bigImg = $('.right-img')
var mask = $('.mask')

// 初始化所有元素
var str = ''
for (var i = 0; i < imgs.small.length; i++){
  str += '<li style="background-image: url(./images/'+imgs.small[i]+')"></li>'
}
smallImg.innerHTML = str

// 默认选中第一个元素
$('.img-list li').style.border = '2px solid #000'

// 绑定事件
smallImg.onclick = function (e) {
  if (e.target.tagName == 'LI') {
    var lis = $$('li')
    for (var i = 0; i < lis.length; i++){
      lis[i].style.border = 'none'
    }
    e.target.style.border = '2px solid #000'

    // 点击缩略图， 原图和大图都要跟着改变
  var index = [].indexOf.call(lis, e.target)
    middleImg.style.backgroundImage = 'url(./images/' + imgs.middle[index] + ')'
    bigImg.style.backgroundImage = 'url(./images/' + imgs.big[index] + ')'
  }
}

middleImg.onmousemove = function (e) {
  mask.style.opacity = 1
  bigImg.style.opacity = 1

  var left = e.clientX - middleImg.offsetLeft - mask.offsetWidth / 2
  var top = e.clientY - middleImg.offsetTop - mask.offsetHeight / 2

  if (left < 0) {
    left = 0
  }

  if (top <= 0) {
    top = 0
  }

  if (left >= middleImg.offsetWidth - mask.offsetWidth) {
    left = middleImg.offsetWidth - mask.offsetWidth
  }

  if (top >= middleImg.offsetHeight - mask.offsetHeight) {
    top = middleImg.offsetHeight - mask.offsetHeight
  } 

  mask.style.left = left + 'px'
  mask.style.top = top + 'px'

  // 修改大图的位置
  bigImg.style.backgroundPositionX = -left + 'px'
  bigImg.style.backgroundPositionY = -top + 'px'

}


middleImg.onmouseleave = function (e) {
  mask.style.opacity = 0
  bigImg.style.opacity = 0
}

放大镜效果

思路