支持多个背景图像淡入淡出的jQuery

// HTML结构
<div id="imageContainer">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

// CSS样式
#imageContainer {
  position: relative;
  width: 500px;
  height: 300px;
  overflow: hidden;
}

#imageContainer img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

// JavaScript代码
$(document).ready(function() {
  var images = $('#imageContainer img');
  var currentIndex = 0;

  function fadeNextImage() {
    var nextIndex = (currentIndex + 1) % images.length;
    var currentImage = images.eq(currentIndex);
    var nextImage = images.eq(nextIndex);

    nextImage.css('opacity', 0).addClass('active').animate({ opacity: 1 }, 1000, function() {
      currentImage.removeClass('active');
      currentIndex = nextIndex;
      setTimeout(fadeNextImage, 3000); // 每隔3秒切换下一张图片
    });
  }

  images.eq(currentIndex).addClass('active').css('opacity', 1);
  setTimeout(fadeNextImage, 3000); // 每隔3秒切换下一张图片
});