怎么使得上述图片不间断的循环播放

您可以使用CSS3的animation属性来实现图片上下切换的效果。具体实现方式可参考以下代码：

HTML代码

<div class="banner">
  <img src="图片地址"/>
  <img src="图片地址"/>
  <img src="图片地址"/>
  <img src="图片地址"/>
</div>

CSS代码

.banner{
  height: 200px;
  position: relative;
  overflow: hidden;
}

.banner img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-animation: banner 16s infinite;
  animation: banner 16s infinite;
}

.banner img:nth-child(1){
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.banner img:nth-child(2){
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

.banner img:nth-child(3){
  -webkit-animation-delay: 8s;
  animation-delay: 8s;
}

.banner img:nth-child(4){
  -webkit-animation-delay: 12s;
  animation-delay: 12s;
}

@-webkit-keyframes banner{
  0%{
    opacity: 0;
    -webkit-transform: scale(1.1);
  }
  25%{
    opacity: 1;
    -webkit-transform: scale(1);
  }
  75%{
    opacity: 1;
    -webkit-transform: scale(1);
  }
  100%{
    opacity: 0;
    -webkit-transform: scale(1.1);
  }
}

@keyframes banner{
  0%{
    opacity: 0;
    transform: scale(1.1);
  }
  25%{
    opacity: 1;
    transform: scale(1);
  }
  75%{
    opacity: 1;
    transform: scale(1);
  }
  100%{
    opacity: 0;
    transform: scale(1.1);
  }
}

其中，我们使用了animation属性来实现动画效果，具体细节可参考CSS3动画属性。此外，我们使用了nth-child选择器来控制每张图片的动画延迟时间，以实现无缝循环播放。