自动点击图片库使用jQuery，第一张图片淡入/淡出，但其他不淡入？

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<div id="image-container">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <!-- 更多图片 -->
</div>

$(document).ready(function() {
  // 选取第一张图片并淡入
  $('#image-container img:first').fadeIn();
});

$(document).ready(function() {
  // 选取第一张图片并淡入
  $('#image-container img:first').fadeIn();

  // 监听图片容器的点击事件
  $('#image-container').on('click', function() {
    // 选取当前显示的图片
    var currentImage = $('#image-container img:visible');

    // 判断当前图片是否为最后一张图片
    if (currentImage.is(':last-child')) {
      // 如果是最后一张图片，则淡出并显示第一张图片
      currentImage.fadeOut();
      $('#image-container img:first').fadeIn();
    } else {
      // 如果不是最后一张图片，则淡出当前图片并淡入下一张图片
      currentImage.fadeOut().next().fadeIn();
    }
  });
});