使用Jquery在幻灯片中添加下一个/上一个选项

<script src="https://cdn.jsdelivr.net/jquery/3.6.0/jquery.min.js"></script>

<div id="slideshow">
  <img src="slide1.jpg" alt="Slide 1">
  <img src="slide2.jpg" alt="Slide 2">
  <img src="slide3.jpg" alt="Slide 3">
</div>

#slideshow {
  position: relative;
  width: 500px;
  height: 300px;
  overflow: hidden;
}

#slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}

$(document).ready(function() {
  var slideshow = $('#slideshow');
  var slides = slideshow.find('img');
  var currentIndex = 0;

  // 显示当前幻灯片
  slides.eq(currentIndex).show();

  // 下一个按钮点击事件
  $('#nextBtn').click(function() {
    // 隐藏当前幻灯片
    slides.eq(currentIndex).hide();

    // 切换到下一张幻灯片
    currentIndex = (currentIndex + 1) % slides.length;

    // 显示下一张幻灯片
    slides.eq(currentIndex).show();
  });

  // 上一个按钮点击事件
  $('#prevBtn').click(function() {
    // 隐藏当前幻灯片
    slides.eq(currentIndex).hide();

    // 切换到上一张幻灯片
    currentIndex = (currentIndex - 1 + slides.length) % slides.length;

    // 显示上一张幻灯片
    slides.eq(currentIndex).show();
  });
});