流畅中心模式走马灯

流畅中心模式走马灯是一种常见的UI效果，可以通过以下代码示例实现：

HTML结构：

<div class="carousel">
  <div class="slides">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>
</div>

CSS样式：

.carousel {
  overflow: hidden;
  width: 100%;
  height: 300px;
}

.slides {
  display: flex;
  animation: carousel 10s infinite;
}

.slides img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes carousel {
  0% {
    transform: translateX(0);
  }
  33% {
    transform: translateX(-100%);
  }
  66% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(0);
  }
}

JavaScript代码（可选，用于动态加载图片）：

const images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
const slides = document.querySelector('.slides');

images.forEach(image => {
  const img = document.createElement('img');
  img.src = image;
  img.alt = image;
  slides.appendChild(img);
});

上述代码中，使用CSS的animation属性实现了走马灯的动画效果。通过translateX属性改变图片的位置，从而实现图片的平滑滚动。@keyframes定义了动画的关键帧，从初始位置到左移两倍图片宽度的位置，再回到初始位置。

在JavaScript代码中，可以通过动态加载图片的方式，将图片添加到走马灯中。这里使用了一个图片数组images，通过遍历数组创建img元素，并将其添加到.slides容器中。

最后，通过在HTML页面中引入CSS和JavaScript文件，即可实现流畅中心模式走马灯的效果。