求助：实现页面6张图片随机淡入淡出（每秒刷新新图）

Hey there! Let's fix up your image fade-in/fade-out functionality step by step. I noticed a few issues with your current code that are preventing it from working as intended, and I'll walk you through the solution.

First, let's break down the problems in your original code:

• Your generateRandomForArray() function generates numbers between 0-7, but your imgsArray only has 6 elements (indices 0-5). This will sometimes return undefined and break your image source.
• There's no timing logic to trigger the function every second—right now it only runs once when the page loads.
• You're missing any fade-in/fade-out animations, and you're just appending images without cleaning them up, which will lead to performance issues over time.

Option 1: Multiple Randomly Positioned Images (Fade In, Then Fade Out After Delay) #

This is if you want a new image to appear in a random spot every second, stay visible for a few seconds, then fade out and get removed.

First, set up your CSS to make sure the container behaves correctly:

.heroBackground {
  position: relative;
  width: 400px; /* Adjust to your container's actual width */
  height: 400px; /* Adjust to your container's actual height */
  overflow: hidden; /* Optional: clips images that go outside the container */
}

.heroBackground img {
  position: absolute;
  opacity: 0;
  transition: opacity 0.5s ease; /* Smooth fade transition */
}

Then the jQuery code:

$(document).ready(function() {
  const imgsArray = ["backgroundI1", "backgroundI2", "backgroundI3", "backgroundI4", "backgroundI5", "backgroundI6"];
  const $container = $(".heroBackground");
  const containerSize = 400; // Match your container's width/height here

  // Generate a valid index for our image array
  function getRandomIndex() {
    return Math.floor(Math.random() * imgsArray.length);
  }

  // Generate a random position within the container
  function getRandomPos() {
    return Math.floor(Math.random() * containerSize);
  }

  // Run this every 1 second
  setInterval(function() {
    // Pick a random image from the array
    const imgName = imgsArray[getRandomIndex()];
    // Create the new image element cleanly
    const newImg = $("<img>", {
      src: `media/backgroundImages/${imgName}.png`
    });

    // Set random position for the new image
    newImg.css({
      top: `${getRandomPos()}px`,
      left: `${getRandomPos()}px`
    });

    // Add to container and trigger fade-in
    $container.append(newImg);
    newImg.animate({ opacity: 1 }, 500);

    // Fade out and remove the image after 3 seconds (adjust timing as needed)
    setTimeout(() => {
      newImg.animate({ opacity: 0 }, 500, function() {
        $(this).remove(); // Clean up to avoid memory bloat
      });
    }, 3000);
  }, 1000);
});

Option 2: Single Background Image (Fade Out Old, Fade In New) #

If you want to switch between images (only one visible at a time) with smooth fade transitions (like a background slideshow), use this instead:

CSS remains similar, but we'll make images fill the container:

.heroBackground {
  position: relative;
  width: 400px;
  height: 400px;
  overflow: hidden;
}

.heroBackground img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
}

jQuery code:

$(document).ready(function() {
  const imgsArray = ["backgroundI1", "backgroundI2", "backgroundI3", "backgroundI4", "backgroundI5", "backgroundI6"];
  const $container = $(".heroBackground");

  function getRandomIndex() {
    return Math.floor(Math.random() * imgsArray.length);
  }

  function switchImage() {
    const $currentImg = $container.find("img");

    // If there's an existing image, fade it out first before adding a new one
    if ($currentImg.length) {
      $currentImg.animate({ opacity: 0 }, 500, function() {
        $(this).remove();
        addNewImage();
      });
    } else {
      // No existing image? Just add the first one immediately
      addNewImage();
    }
  }

  function addNewImage() {
    const imgName = imgsArray[getRandomIndex()];
    const newImg = $("<img>", {
      src: `media/backgroundImages/${imgName}.png`,
      css: { opacity: 0 }
    });

    $container.append(newImg);
    newImg.animate({ opacity: 1 }, 500);
  }

  // Switch images every second
  setInterval(switchImage, 1000);
});

Key Fixes & Improvements: #

• Valid Array Indices: We now use imgsArray.length to generate indices, so we never try to access an element that doesn't exist.
• Timing Logic: setInterval ensures we trigger a new image every second, as requested.
• Fade Animations: Using jQuery's animate() (or CSS transitions) gives smooth, polished fade effects.
• Cleanup: We remove old images after they fade out to prevent your page from getting cluttered with unused elements.

Pick the option that fits your use case best, and adjust the container sizes, timing, and animation speeds to match your design!

内容的提问来源于stack exchange，提问作者Drk Design