为简易评论淡入淡出轮播脚本添加上/下一页箭头按钮

给你修改后的完整实现，包含左右切换按钮，同时保留原有的自动轮播功能：

完整代码 #

HTML（新增切换按钮） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="testimonial-container">
  <button class="carousel-btn prev">&lt;</button>
  <ul id="testimonials">
    <li class="testimonial-1">“Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.”</li>
    
    <li class="testimonial-2">“Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.”</li>
    
    <li class="testimonial-3">“新增的第三条测试内容，用来验证循环切换逻辑是否正常。”</li>
  </ul>
  <button class="carousel-btn next">&gt;</button>
</div>

CSS（美化切换按钮） #

.testimonial-container {
  position: relative;
  max-width: 600px;
  margin: 20px auto;
}

#testimonials {
  list-style: none;
  padding: 0;
  margin: 0;
}

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

.carousel-btn.prev {
  left: 10px;
}

.carousel-btn.next {
  right: 10px;
}

.carousel-btn:hover {
  background: rgba(0,0,0,0.7);
}

JavaScript（支持手动切换+自动轮播） #

$(document).ready(function() {
  var items = $('li[class^="testimonial-"]').hide(),
      currentIndex = 0,
      carouselTimer;

  // 自动轮播函数
  function startCarousel() {
    carouselTimer = setTimeout(function cycle() {
      items.eq(currentIndex).fadeOut(800, function() {
        currentIndex = (currentIndex + 1) % items.length;
        items.eq(currentIndex).fadeIn(800);
        carouselTimer = setTimeout(cycle, 8000);
      });
    }, 8000);
  }

  // 初始化：显示第一个元素，启动自动轮播
  items.eq(currentIndex).fadeIn(800);
  startCarousel();

  // 上一页按钮点击事件
  $('.prev').click(function() {
    clearTimeout(carouselTimer);
    items.eq(currentIndex).fadeOut(800, function() {
      // 边界处理：当前是第一页时跳转到最后一页
      currentIndex = (currentIndex - 1 + items.length) % items.length;
      items.eq(currentIndex).fadeIn(800);
      startCarousel();
    });
  });

  // 下一页按钮点击事件
  $('.next').click(function() {
    clearTimeout(carouselTimer);
    items.eq(currentIndex).fadeOut(800, function() {
      // 循环到第一页
      currentIndex = (currentIndex + 1) % items.length;
      items.eq(currentIndex).fadeIn(800);
      startCarousel();
    });
  });
});

关键改动说明 #

• HTML结构：新增容器.testimonial-container包裹轮播内容和切换按钮，用<button>元素做切换按钮，语义化且交互友好
• CSS样式：给按钮添加定位、半透明背景和hover效果，确保按钮显眼易点击，且层级高于轮播内容
• JS逻辑优化：
  • 提取startCarousel函数统一管理自动轮播定时器，方便手动切换时暂停和重启
  • 处理按钮点击时的动画顺序：先隐藏当前元素，再显示目标元素，避免内容重叠
  • 加入边界索引处理，点击上一页从第一页跳转到最后一页，点击下一页从最后一页跳转到第一页，实现循环切换

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