如何用JavaScript为列表元素设置独立随机背景并定时切换？

1. 解决所有元素背景相同的问题 #

你当前代码的核心问题是：在each循环里使用了$('.hexagon').css(...)——这行代码会选中页面上所有的.hexagon元素，所以每次循环都会把所有元素的背景改成同一个随机值，最终所有元素都变成了最后一次循环生成的背景。

只需要把选中元素的方式改成$(this)，它会指代当前循环到的那个.hexagon，这样每个元素都会被单独设置随机背景：

var bgz = ['bg2.jpg', 'bg3.jpg', 'bg4.jpg', 'bg5.jpg'];

// 初始化每个hexagon的独立随机背景
$("#grid li .hexagon").each(function() {
  // 为当前元素生成随机背景
  const randomBg = bgz[Math.floor(Math.random() * bgz.length)];
  $(this).css({'background-image': `url(images/${randomBg})`});
});

我这里用了ES6的模板字符串${randomBg}，比字符串拼接更简洁，当然你用原来的拼接方式也完全没问题。

2. 实现每隔x秒自动切换背景 #

要做定时切换，我们可以把设置背景的逻辑封装成一个独立函数，然后用setInterval来定时触发它。这样每次触发时，所有.hexagon都会重新分配随机背景：

var bgz = ['bg2.jpg', 'bg3.jpg', 'bg4.jpg', 'bg5.jpg'];
const switchTime = 3000; // 切换间隔，单位毫秒，这里设置为3秒

// 封装设置随机背景的函数
function updateHexBg() {
  $("#grid li .hexagon").each(function() {
    const randomBg = bgz[Math.floor(Math.random() * bgz.length)];
    $(this).css({'background-image': `url(images/${randomBg})`});
  });
}

// 页面加载完成后先初始化一次背景
$(document).ready(function() {
  updateHexBg();
  // 启动定时切换
  setInterval(updateHexBg, switchTime);
});

如果想要切换效果更流畅，可以给.hexagon加上CSS过渡动画：

.hexagon {
  /* 保留你原有的样式 */
  transition: background-image 0.6s ease;
}

这样背景切换时会有平滑的过渡效果，体验更好。

内容的提问来源于stack exchange，提问作者Karim Sahali