如何实现背景图轮播时不重复上一张已使用的图片？

Hey Steve, great question! Your current code handles random background rotation, but since it pulls from the full image array every time, duplicates of the previous image are bound to pop up. Let's fix that with two solid, easy-to-implement approaches:

Approach 1: Avoid Immediate Repeats #

This is the simplest tweak—we'll just track the last image we used, and keep generating a new random index until it doesn't match the last one.

var imgs = [
  "https://store.vtxfactory.org/wp-content/uploads/2018/header/1.jpg",
  "https://store.vtxfactory.org/wp-content/uploads/2018/header/2.jpg",
  "https://store.vtxfactory.org/wp-content/uploads/2018/header/3.jpg",
  "https://store.vtxfactory.org/wp-content/uploads/2018/header/4.jpg",
  "https://store.vtxfactory.org/wp-content/uploads/2018/header/5.jpg",
  "https://store.vtxfactory.org/wp-content/uploads/2018/header/6.jpg"
];
let lastImgIndex = -1; // Initialize to a value that can't match any valid index

function changeBg() {
  let currentIndex;
  // Keep generating random indexes until we get one that's not the last used
  do {
    currentIndex = Math.floor(Math.random() * imgs.length);
  } while (currentIndex === lastImgIndex);

  lastImgIndex = currentIndex; // Update the last used index
  const imgUrl = imgs[currentIndex];
  $('#masthead').css('background-image', `url(${imgUrl})`);
};

setInterval(changeBg, 10000);

How It Works: #

• We add a lastImgIndex variable to track which image was shown most recently
• The do...while loop ensures we only pick an index that's different from the last one
• This is lightweight and perfect if you just want to avoid back-to-back repeats (you might still see the same image again after one other, which is usually totally fine for most use cases)

Approach 2: Cycle Through All Images Without Repeats (Until a Full Loop) #

If you want a more polished experience where users see every image before any repeats, use this shuffle-based method. It uses the Fisher-Yates shuffle to randomize the image order, then cycles through them until the list is empty—then reshuffles and starts over.

var imgs = [
  "https://store.vtxfactory.org/wp-content/uploads/2018/header/1.jpg",
  "https://store.vtxfactory.org/wp-content/uploads/2018/header/2.jpg",
  "https://store.vtxfactory.org/wp-content/uploads/2018/header/3.jpg",
  "https://store.vtxfactory.org/wp-content/uploads/2018/header/4.jpg",
  "https://store.vtxfactory.org/wp-content/uploads/2018/header/5.jpg",
  "https://store.vtxfactory.org/wp-content/uploads/2018/header/6.jpg"
];
let shuffledImgs = [...imgs]; // Create a copy of the original array for shuffling

// Fisher-Yates Shuffle: A reliable, unbiased way to randomize an array
function shuffleArray(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const randomPos = Math.floor(Math.random() * (i + 1));
    // Swap elements in place
    [array[i], array[randomPos]] = [array[randomPos], array[i]];
  }
}

// Initialize the shuffled list
shuffleArray(shuffledImgs);

function changeBg() {
  // If we've used all images, reshuffle and reset the list
  if (shuffledImgs.length === 0) {
    shuffledImgs = [...imgs];
    shuffleArray(shuffledImgs);
  }

  // Grab the first image from the shuffled list and remove it
  const imgUrl = shuffledImgs.shift();
  $('#masthead').css('background-image', `url(${imgUrl})`);
};

setInterval(changeBg, 10000);

How It Works: #

• The Fisher-Yates shuffle ensures a fair, random order (no predictable bias)
• We cycle through the shuffled list one by one, removing each image as we use it
• When the list is empty, we reshuffle the original array and start fresh
• This guarantees users will never see a repeat until every image has been displayed once

Which One Should You Pick? #

• Go with Approach 1 if you want simple code and just need to avoid immediate repeats
• Choose Approach 2 if you want a more thoughtful rotation where all images get equal airtime before any repeats

内容的提问来源于stack exchange，提问作者Steve Kess