HTML与CSS修改背景色及图片数组随机平滑展示相关问题

基础静态设置 #

直接通过CSS规则为指定元素设置背景色即可，支持颜色名、十六进制、rgb/rgba、hsl等多种颜色格式：

<!-- HTML结构示例 -->
<div class="target-element">需要设置背景色的元素</div>

/* 固定背景色设置 */
.target-element {
  background-color: #f0f2f5;
  width: 300px;
  height: 200px;
}

/* 如需hover等交互状态下的平滑背景色切换，添加过渡规则即可 */
.target-element {
  transition: background-color 0.3s ease;
}
.target-element:hover {
  background-color: #2c5cc5;
}

如果需要点击等触发的动态背景色切换，配合少量JS实现：

const ele = document.querySelector('.target-element')
ele.addEventListener('click', () => {
  // 随机生成背景色示例
  const randomColor = `rgb(${Math.floor(Math.random()*256)}, ${Math.floor(Math.random()*256)}, ${Math.floor(Math.random()*256)})`
  ele.style.backgroundColor = randomColor
})

实现逻辑：

• 维护待展示图片列表，避免重复抽取已展示内容
• 定时器控制单张图片的展示间隔，实现逐步加载效果
• 图片资源加载完成后再触发淡入动画，避免空白闪烁
• CSS过渡实现平滑的展示效果
  代码示例：

<!-- 图片展示容器 -->
<div class="img-wrapper"></div>

.img-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  gap: 16px;
  padding: 20px;
}
.img-item {
  width: 200px;
  height: 200px;
  object-fit: cover;
  /* 初始隐藏，用于过渡动画 */
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.6s ease;
}
/* 加载完成后添加该类触发淡入 */
.img-item.show {
  opacity: 1;
  transform: translateY(0);
}

// 你的图片地址数组
const imgArr = [
  '你的图片地址1',
  '你的图片地址2',
  '你的图片地址3',
  // 其余图片地址...
]
// 复制数组操作，避免修改原数组
const remainingImgs = [...imgArr]
const wrapper = document.querySelector('.img-wrapper')
// 单张图片展示间隔，单位ms，1000即1秒加载一张
const SHOW_INTERVAL = 1000

const showRandomImg = () => {
  // 所有图片展示完成后清除定时器
  if (remainingImgs.length === 0) {
    clearInterval(timer)
    return
  }
  // 随机抽取剩余图片
  const randomIndex = Math.floor(Math.random() * remainingImgs.length)
  const currentSrc = remainingImgs.splice(randomIndex, 1)[0]
  
  const img = document.createElement('img')
  img.className = 'img-item'
  img.alt = '展示图片'
  img.src = currentSrc
  // 图片加载完成后再触发展示
  img.onload = () => {
    wrapper.appendChild(img)
    requestAnimationFrame(() => {
      img.classList.add('show')
    })
  }
}

// 启动定时器逐步展示
const timer = setInterval(showRandomImg, SHOW_INTERVAL)

注意：可以根据需求调整SHOW_INTERVAL的数值控制图片出现速度，修改CSS中transition的时长可以调整淡入动画的快慢。

内容的提问来源于stack exchange，提问作者Alok Solanky