在Angular中创建自定义轮播插件：中间项放大效果实现求助

核心实现思路 #

通过HTML搭建轮播容器结构，结合CSS的flex布局与transform属性实现项的缩放、位移动画，再用JavaScript控制切换逻辑，确保中间选中项始终保持放大状态。

HTML结构 #

<div class="carousel-container">
  <button class="carousel-btn prev-btn">&lt;</button>
  <div class="carousel-track">
    <div class="carousel-item active">
      <img src="dev-avatar.jpg" alt="开发者">
      <p>张三</p>
    </div>
    <div class="carousel-item">
      <img src="dev-avatar.jpg" alt="开发者">
      <p>李四</p>
    </div>
    <div class="carousel-item">
      <img src="dev-avatar.jpg" alt="开发者">
      <p>王五</p>
    </div>
    <div class="carousel-item">
      <img src="dev-avatar.jpg" alt="开发者">
      <p>赵六</p>
    </div>
    <div class="carousel-item">
      <img src="dev-avatar.jpg" alt="开发者">
      <p>孙七</p>
    </div>
  </div>
  <button class="carousel-btn next-btn">&gt;</button>
</div>

CSS样式 #

.carousel-container {
  position: relative;
  width: 80%;
  margin: 2rem auto;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease;
  gap: 20px;
  padding: 20px 0;
}

.carousel-item {
  flex: 0 0 auto;
  width: 120px;
  text-align: center;
  transition: all 0.5s ease;
  transform: scale(0.8);
  opacity: 0.7;
}

.carousel-item.active {
  transform: scale(1.2);
  opacity: 1;
  z-index: 1;
}

.carousel-item img {
  width: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: rgba(0,0,0,0.3);
  color: #fff;
  font-size: 24px;
  padding: 10px 15px;
  cursor: pointer;
  z-index: 2;
}

.prev-btn { left: 10px; }
.next-btn { right: 10px; }

JavaScript逻辑 #

const track = document.querySelector('.carousel-track');
const items = document.querySelectorAll('.carousel-item');
const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');
let currentIndex = 0;
const itemGap = 20; // 和CSS里的gap值保持一致
const baseItemWidth = items[0].offsetWidth + itemGap;

function updateCarousel() {
  // 计算轨道偏移量，让当前激活项居中
  const centerOffset = (track.offsetWidth / 2) - (items[currentIndex].offsetWidth / 2);
  track.style.transform = `translateX(${-currentIndex * baseItemWidth + centerOffset}px)`;
  
  // 更新所有项的样式状态
  items.forEach((item, index) => {
    item.classList.toggle('active', index === currentIndex);
    const distance = Math.abs(index - currentIndex);
    if (distance === 1) {
      item.style.transform = 'scale(0.9)';
      item.style.opacity = '0.9';
    } else if (distance > 1) {
      item.style.transform = 'scale(0.8)';
      item.style.opacity = '0.7';
    }
  });
}

// 点击切换上一项
prevBtn.addEventListener('click', () => {
  currentIndex = (currentIndex - 1 + items.length) % items.length;
  updateCarousel();
});

// 点击切换下一项
nextBtn.addEventListener('click', () => {
  currentIndex = (currentIndex + 1) % items.length;
  updateCarousel();
});

// 初始化轮播状态
updateCarousel();

关键细节说明 #

1. 用transform: scale()实现项的大小变化，配合transition属性实现平滑过渡动画
2. 通过计算轨道偏移量，确保当前激活项始终处于容器居中位置
3. 给相邻项设置中等缩放比例，非相邻项保持最小缩放，营造视觉层次感
4. 利用取模运算实现循环切换，支持无限轮播

内容的提问来源于stack exchange，提问作者zeus