如何实现居中放大且文案渐显的无插件jQuery Testimonial轮播

当然可以实现这个需求，我们需要补充CSS样式来定义布局和动画，并调整jQuery逻辑来实现平滑的左移动画和文案渐显效果。

需求回顾 #

• 初始状态：显示中间的Person2（active类项）
• 轮播逻辑：3秒后，当前active项左移退出可视区，下一项移动到居中位置并渐显文案，最左侧项移到队列末尾形成循环

第一步：补充CSS样式 #

定义可视区域、轮播容器及slide的布局与过渡动画：

/* 可视区域：对应红色框，溢出隐藏 */
.people-carousel-container {
  width: 600px; /* 根据实际需求调整宽度 */
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

/* 轮播内部容器，flex布局排列slide */
.inner-testimonial {
  display: flex;
  transition: transform 0.5s ease; /* 平滑左移动画 */
  width: fit-content;
}

/* 基础slide样式 */
.slide {
  width: 600px; /* 与可视区域宽度一致 */
  padding: 20px;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.5s ease; /* 文案渐显动画 */
}

/* active状态：居中显示、完全不透明 */
.slide.active {
  opacity: 1;
}

/* small状态：非active项初始隐藏 */
.slide.small {
  opacity: 0;
}

第二步：调整jQuery逻辑 #

实现左移动画、渐显效果与循环逻辑：

setInterval(function() {
  const $container = $(".people-carousel-container .inner-testimonial");
  const $firstSlide = $container.find(".slide").first();
  
  // 触发容器左移动画，带动当前active项退出可视区
  $container.css("transform", "translateX(-100%)");
  
  // 等待动画完成后重置布局，实现循环
  setTimeout(function() {
    // 将首个slide移到容器末尾
    $container.append($firstSlide).css("transform", "translateX(0)");
    
    // 更新slide状态：给新的中间项添加active，其余设为small
    $container.find(".slide").removeClass("active").addClass("small");
    $container.find(".slide").eq(1).removeClass("small").addClass("active");
  }, 500); // 等待CSS过渡动画完成（与transition时长一致）
}, 3000); // 3秒轮播间隔，匹配需求

第三步：HTML结构确认 #

确保初始状态符合需求：

<div class="people-carousel-container">
  <div class="inner-testimonial">
    <!-- Person1：初始隐藏 -->
    <div class="slide small">
      <h4>Great platform Easy to use and received my first product today!</h4>
      <div class="image-box">
        <img src="resources/front/img/profile-placeholder-img.png" alt="product image">
        <p>Jane Smith</p>
      </div>
    </div>
    <!-- Person2：初始显示 -->
    <div class="slide active">
      <h4>Ut enim ad minim veniam, quis nostrud exercitation quis minim</h4>
      <div class="image-box">
        <img src="resources/front/img/profile-placeholder-img-1.png" alt="product image">
        <p>Jonny Tell</p>
      </div>
    </div>
    <!-- Person3：初始隐藏 -->
    <div class="slide small">
      <h4>Lorem ipsum dolor sit amet, consectetur adipiscing eli. dolor</h4>
      <div class="image-box">
        <img src="resources/front/img/profile-placeholder-img-2.png" alt="product image">
        <p>Mick Dooper</p>
      </div>
    </div>
  </div>
</div>

逻辑说明 #

1. 左移动画：通过transform: translateX(-100%)让容器整体左移，配合CSS过渡实现平滑滑动效果
2. 循环机制：动画完成后将首个slide移到容器末尾，重置容器位置，实现无限轮播
3. 渐显效果：利用opacity属性的过渡动画，让居中的active项逐渐显示，非active项保持隐藏

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