效果图如下：

下面是html、css、js整合在一起的代码： 

<!doctype html><html><head><meta charset="utf-8"><title>Document</title></head><style>.middle{
   
   
    width:400px;
    height:400px;
    border:1px solid #000;
    position:relative;}.middle>img{
   
   
    width:400px;
    height:400px;}.small{
   
   
    width:400px;    
    height:100px;
    display: flex;
    justify-content: flex-start;
    align-items: center;}.small img{
   
   
    border:1px solid #0f0;
    width:50px;
    height:50px;
    margin:05px;}.small img.active{
   
   
    border-color:red;}.shade{
   
   
    width:100px;
    height:100px;
    background:rgba(255,255,0,0.5);
    position:absolute;
    left:0;
    top:0;
    display:none;}.big{
   
   
    width:400px;
    height:400px;
    position: absolute;
    left:105%;
    top:0;
    overflow:hidden;
    display:none;}.big>img{
   
   
    width:1600px;
    height:1600px;
    position:absolute;
    left:0;
    top:0;}.box{
   
   
    margin:50px;}.shade:hover{
   
   
    cursor:move;