加载后,在secquence中淡入多个图像

<div id="image-container"></div>

#image-container {
  width: 500px;
  height: 300px;
  background-color: #f2f2f2;
}

var imageUrls = [
  'image1.jpg',
  'image2.jpg',
  'image3.jpg'
];

window.onload = function() {
  var container = document.getElementById('image-container');
  
  // 遍历图像URL数组
  for (var i = 0; i < imageUrls.length; i++) {
    // 创建图像元素
    var image = document.createElement('img');
    image.src = imageUrls[i];
    
    // 设置初始透明度为0
    image.style.opacity = 0;
    
    // 使用定时器逐渐增加透明度
    fadeIn(image, i * 1000); // 延迟时间逐个增加，以实现依次淡入的效果
    
    // 将图像添加到容器中
    container.appendChild(image);
  }
};

function fadeIn(element, delay) {
  setTimeout(function() {
    var opacity = 0;
    var timer = setInterval(function() {
      if (opacity >= 1) {
        clearInterval(timer);
      }
      element.style.opacity = opacity;
      opacity += 0.1; // 每次透明度增加的步长
    }, 100); // 每次透明度变化的时间间隔
  }, delay); // 延迟时间
}