h5 实现coverflow

实现 CoverFlow 效果

CoverFlow 是一种常见的 3D 图片轮播效果，可以通过 HTML5 和 CSS3 结合 JavaScript 实现。以下是实现 CoverFlow 效果的几种方法：

使用 CSS3 3D 变换和 JavaScript

通过 CSS3 的 transform 属性实现 3D 效果，结合 JavaScript 控制图片的旋转和位置。

<div class="coverflow">
  <div class="item"><img src="image1.jpg"></div>
  <div class="item"><img src="image2.jpg"></div>
  <div class="item"><img src="image3.jpg"></div>
</div>

.coverflow {
  display: flex;
  justify-content: center;
  perspective: 1000px;
  transform-style: preserve-3d;
}

.item {
  width: 200px;
  height: 200px;
  position: absolute;
  transition: transform 0.5s;
}

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

const items = document.querySelectorAll('.item');
const centerIndex = Math.floor(items.length / 2);

items.forEach((item, index) => {
  const offset = index - centerIndex;
  const angle = offset * 30;
  const zOffset = Math.abs(offset) * -50;
  const xOffset = offset * 100;

  item.style.transform = `
    translateX(${xOffset}px)
    translateZ(${zOffset}px)
    rotateY(${angle}deg)
  `;
});

使用第三方库（如 Swiper）

Swiper 是一个流行的轮播库，支持 CoverFlow 效果。

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="image1.jpg"></div>
    <div class="swiper-slide"><img src="image2.jpg"></div>
    <div class="swiper-slide"><img src="image3.jpg"></div>
  </div>
</div>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

const swiper = new Swiper('.swiper-container', {
  effect: 'coverflow',
  grabCursor: true,
  centeredSlides: true,
  slidesPerView: 'auto',
  coverflowEffect: {
    rotate: 50,
    stretch: 0,
    depth: 100,
    modifier: 1,
    slideShadows: true,
  },
});

使用纯 CSS 动画

通过 CSS 关键帧动画实现简单的 CoverFlow 效果。

@keyframes coverflow {
  0% { transform: rotateY(0deg) translateZ(0px); }
  100% { transform: rotateY(360deg) translateZ(200px); }
}

.item {
  animation: coverflow 10s infinite;
}

响应式设计

确保 CoverFlow 在不同设备上正常显示。

@media (max-width: 768px) {
  .item {
    width: 150px;
    height: 150px;
  }
}

交互优化

添加鼠标悬停或点击事件增强用户体验。

items.forEach(item => {
  item.addEventListener('mouseenter', () => {
    item.style.transform += ' scale(1.1)';
  });
  item.addEventListener('mouseleave', () => {
    item.style.transform = item.style.transform.replace(' scale(1.1)', '');
  });
});

通过以上方法可以实现 CoverFlow 效果，具体选择取决于项目需求和技术栈。