html实现效果，要求五张图片并列排布。点击某一张图片时。改图片跳出排布。到页面中间显示。同时剩下来的四张图片。按照点击图片后一张为第一张排布。同时需要有滑动的效果动画。

要实现这个HTML布局和交互效果，你可以使用HTML、CSS和JavaScript（通常是jQuery）。以下是简单的步骤：

1. **HTML结构**:

<div class="image-container">
  <img src="image1.jpg" class="slide-item active">
  <img src="image2.jpg" class="slide-item">
  <img src="image3.jpg" class="slide-item">
  <img src="image4.jpg" class="slide-item">
  <img src="image5.jpg" class="slide-item">
</div>

在这个结构中，每个`<img>`标签代表一张图片，并且有一个共同的类名`.slide-item`。当前显示的图片添加了额外的`active`类。

2. **CSS样式**:

.image-container {
  display: flex;
  justify- 20px); /* 或者其他百分比 */
  margin-right: 20px; /* 留出一点间距 */
  cursor: pointer;
  transition: transform 0.5s ease-in-out; /* 添加过渡效果 */
}

.active {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

这会让图片水平排列并设置鼠标悬停时的变换效果。

3. **JavaScript/jQuery** (假设已经引入了jQuery库):

$('.slide-item').click(function() {
  var $this = $(this);
  
  // 隐藏所有图片
  $('.slide-item').not($this).removeClass('active');
  
  // 将点击的图片居中显示
  $this.addClass('active');
  
  // 动画效果
  $this.animate({top: '50%', left: '50%'}, 500);
});

当用户点击一张图片时，它会从堆叠中移除原来的第一张图片的样式，并将新选中的图片放置在页面中央，同时提供滑动动画效果。