jquery 全屏图片切换

<div id="fullscreen-slider">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>
<button id="prev">Previous</button>
<button id="next">Next</button>

#fullscreen-slider {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#fullscreen-slider img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

#fullscreen-slider img.active {
  opacity: 1;
}

$(document).ready(function() {
  var $slider = $('#fullscreen-slider');
  var $images = $slider.find('img');
  var currentIndex = 0;

  function showImage(index) {
    $images.removeClass('active');
    $images.eq(index).addClass('active');
  }

  $('#prev').click(function() {
    currentIndex = (currentIndex - 1 + $images.length) % $images.length;
    showImage(currentIndex);
  });

  $('#next').click(function() {
    currentIndex = (currentIndex + 1) % $images.length;
    showImage(currentIndex);
  });

  // 自动播放功能
  setInterval(function() {
    currentIndex = (currentIndex + 1) % $images.length;
    showImage(currentIndex);
  }, 3000); // 每3秒切换一次

  // 初始化显示第一张图片
  showImage(currentIndex);
});