当前位置：首页 > 行业动态 > 正文

html图片渐隐渐显

admin
行业动态
2025-05-04
4

通过CSS动画或JS控制图片opacity属性，设置渐变时间实现渐

实现原理

图片渐隐渐显效果通过CSS控制图片透明度（opacity）和过渡（transition）实现，配合JavaScript定时切换图片状态，核心是让当前图片逐渐消失（opacity:0），同时让下一张图片逐渐显示（opacity:1）。

html图片渐隐渐显第1张

CSS关键属性

属性	作用	示例值
`opacity`	控制元素透明度	`0`（完全透明）~`1`（不透明）
`transition`	定义过渡效果	`all 1s ease`
`position`	控制图片叠加方式	`absolute`

HTML结构

<div class="image-container">
  <img src="image1.jpg" class="active" />
  <img src="image2.jpg" />
</div>

容器：relative定位，确保内部绝对定位的图片能叠加。
图片：初始仅第一张设active类（opacity:1），其余默认opacity:0。

完整示例代码

CSS样式

.image-container {
  position: relative;
  width: 500px; / 根据图片尺寸调整 /
  height: 300px;
}
.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; / 默认隐藏 /
  transition: opacity 1s ease; / 1秒渐变 /
}
.image-container img.active {
  opacity: 1; / 激活状态显示 /
}

JavaScript逻辑

const images = document.querySelectorAll('.image-container img');
let currentIndex = 0;
setInterval(() => {
  images[currentIndex].classList.remove('active'); // 渐隐
  currentIndex = (currentIndex + 1) % images.length; // 切换下一张
  images[currentIndex].classList.add('active');     // 渐显
}, 3000); // 每3秒切换一次