SOURCE

var containerLen = 600;
var containerHeight = 300;
var imageLength = Math.round((9*containerLen - 180)/35);
var x = Math.round(imageLength*7/4+imageLength/3);
var xx = Math.round(containerLen*3/4+imageLength);
var showImageLen = Math.round(imageLength*5/3);
var curIndex=2;
var exhitDom = document.querySelector("#exbibitShow");
var imgDoms = exhitDom.querySelectorAll("img");
var containerDom = document.querySelector(".exbihit-container");
containerDom.style.width = containerLen+"px";
if(containerHeight >= showImageLen+60) {
  containerDom.style.height = containerHeight+"px";
} else {
  containerDom.style.height = (showImageLen+100)+"px";
}
function init() {
  exhitDom.style.width = imageLength+'px';
  exhitDom.style.height = imageLength+'px';
  for(var i=0;i<imgDoms.length;i++) {
    if(i+1 < curIndex) {
			imgDoms[i].style.transform = "translateX(-"+xx+"px)  translateZ(-500px)";
    } else if(i+1===curIndex) {
      imgDoms[i].style.transform = "translateX(-"+x+"px)  translateZ(-500px)";
    } else if(i===curIndex) {
      imgDoms[i].style.transform = "translateX(0px) translateZ(400px)";
    } else if(i===curIndex+1) {
      imgDoms[i].style.transform = "translateX("+x+"px)  translateZ(-500px)";
    } else {
      imgDoms[i].style.transform = "translateX("+xx+"px)  translateZ(-500px)";
    }
  }
}
function initOpers() {
  document.querySelector("#opernext").addEventListener("click",function() {
    if(curIndex+1 === imgDoms.length) {
      return;
    }
    if(curIndex > 0) {
      imgDoms[curIndex-1].style.transform = "translateX(-"+xx+"px)  translateZ(-500px)";
    }
    imgDoms[curIndex].style.transform = "translateX(-"+x+"px)  translateZ(-500px)";
    imgDoms[curIndex+1].style.transform = "translateX(0px) translateZ(400px)";
    if(curIndex+2 < imgDoms.length) {
      imgDoms[curIndex+2].style.transform = "translateX("+x+"px)  translateZ(-500px)";
    }
    curIndex++;
  });
  document.querySelector("#operprev").addEventListener("click",function() {
    if(curIndex === 0) {
      return;
    }
    if(curIndex+1 < imgDoms.length) {
      imgDoms[curIndex+1].style.transform = "translateX("+xx+"px)  translateZ(-500px)";
    }
    imgDoms[curIndex].style.transform = "translateX("+x+"px)  translateZ(-500px)";
    imgDoms[curIndex-1].style.transform = "translateX(0px) translateZ(400px)";
    if(curIndex > 1) {
      imgDoms[curIndex-2].style.transform = "translateX(-"+x+"px)  translateZ(-500px)";
    }
    curIndex--;
  });
  for(var i=0;i<imgDoms.length;i++) {
    imgDoms[i].addEventListener("click",(i) => {
      if(i == curIndex) {
        return;
      } else if(i < curIndex) {
        document.querySelector("#operprev").click();
      } else {
        document.querySelector("#opernext").click();
      }
    });
  }
}

setTimeout(() => {
  init();
  initOpers();
},200);

<div class="exbihit-container">
  <div class="oper-btn oper-prev" id="operprev"></div>
  <div class="oper-btn oper-next" id="opernext"></div>
  <div class="exbihit-list" id="exbibitShow">
    <img src="https://wwwstatic.vivo.com.cn/vivoportal/files/image/detail/20190318/4c2f35b1ac1a27e2d962b59e2ab33c81.png" alt="X27">
    <img src="https://wwwstatic.vivo.com.cn/vivoportal/files/image/detail/20190409/5c9702b6e67362472a3c1bd6d1ecd089.png" alt="X27 Pro">
    <img src="https://wwwstatic.vivo.com.cn/vivoportal/files/image/detail/20190325/ca72d1132db26f764705fb3ba3ca5c8d.png" alt="X27 8GB+128GB版">
    <img src="https://wwwstatic.vivo.com.cn/vivoportal/files/image/detail/20181029/6d276a4cb84a2d55cbba56cf808706d8.jpg" alt="X21s">
    <img src="https://wwwstatic.vivo.com.cn/vivoportal/files/image/detail/20180831/bd9b5c3f5fdee7282749b4986d4e38b3.png" alt="X23">
  </div>
</div>

.exbihit-container {
  width:1200px;
  height: 400px;
  margin:10px auto;
  overflow:hidden;
  position:relative;
}
.exbihit-container .oper-btn {
  height:30px;
  width:30px;
  border:solid 1px #999;
  border-radius:50%;
  position:absolute;
  z-index:5;
}
.exbihit-container .oper-btn:after {
  content:"";
  height:10px;
  width:10px;
  position:absolute;
  border:solid 2px #666;
}
.exbihit-container .oper-prev:after {
  border-color: #666 transparent transparent #666;
  top:8px;
  left:11px;
  transform: rotate(-45deg);
}
.exbihit-container .oper-next:after {
  border-color: #666 #666 transparent transparent;
  top:8px;
  left:5px;
  transform: rotate(45deg);
}
.exbihit-container .oper-btn:hover {
  cursor:pointer;
  background-color:#e6e6e6;
}
.exbihit-container .oper-prev {
  top:50%;
  transform:translateY(-50%);
}
.exbihit-container .oper-next {
  top:50%;
  right:0;
  transform:translateY(-50%);
}
.exbihit-list {
  position:absolute;
  perspective: 1000px;
  transform-style:preserve-3d;
  height:300px;
  width:300px;
  top:50%;
  left:50%;
  transform:translateX(-50%) translateY(-50%);
}
.exbihit-list img {
  height:100%;
  width:100%;
  box-sizing:border-box;
  position:absolute;
  transition:all 1s linear;
}
.exbihit-list img:hover {
  cursor:pointer;
  margin-bottom: -15px;
}
.exbihit-list img:after {
  content:"";
  display:inline-block;
  width:100px;
  height:5px;
  background-color:red;
  box-shadow:0px 0px 20px 3px red;
  position:absolute;
  top: 110%;
}