求助：如何实现网页淡入式循环轮播图片效果（附现有代码）

针对你需要的页面加载时淡入、循环淡入淡出切换的轮播效果，调整后的完整代码如下：

HTML 代码 #

<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
<h1>轮播示例</h1>
<div class="slider-frame">
  <div class="slide-images">
    <div class="img-container">
      <img src="https://cdn.wallpapersafari.com/48/44/knh76C.jpg" />
    </div>
    <div class="img-container">
      <img src="https://wallpaperaccess.com/full/4250656.jpg" />
    </div>
    <div class="img-container">
      <img src="https://preview.redd.it/38aeu51hq3d61.jpg?auto=webp&s=ae0c88bc1b22516c312823c697e44285e961f748" />
    </div>
  </div>
</div>

CSS 代码 #

html {
  height: 100%;
  width: 100%;
}

body {
  padding: 0;
  margin: 0;
  background-color: floralwhite;
}

h1 {
  margin-top: 50px;
  margin-left: 510px;
  font-size: 60px;
  font-family: 'Karla', sans-serif;
  font-weight: lighter;
}

.slider-frame {
  overflow: hidden;
  height: 800px;
  width: 1200px;
  margin: auto;
  /* 页面加载时的淡入动画 */
  animation: containerFadeIn 1s ease-in forwards;
  opacity: 0;
}

.slide-images {
  position: relative;
  height: 100%;
  width: 100%;
}

.img-container {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  /* 每张图片的淡入淡出动画 */
  animation: slideFade 9s infinite ease-in-out;
}

/* 确保图片填充容器，保持比例不变形 */
.img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 容器初始淡入动画 */
@keyframes containerFadeIn {
  to {
    opacity: 1;
  }
}

/* 轮播图切换动画 */
@keyframes slideFade {
  0% { opacity: 0; }
  10% { opacity: 1; } /* 淡入完成 */
  30% { opacity: 1; } /* 停留展示 */
  40% { opacity: 0; } /* 淡出完成 */
  100% { opacity: 0; } /* 保持透明直到下一轮 */
}

/* 为每张图片设置延迟，实现依次切换 */
.img-container:nth-child(2) {
  animation-delay: 3s;
}

.img-container:nth-child(3) {
  animation-delay: 6s;
}

关键修改说明 #

• 移除原有的左右滑动逻辑，改用绝对定位+透明度切换实现淡入淡出效果，匹配你需要的示例样式
• 新增containerFadeIn动画，让轮播容器在页面加载时从透明渐变为可见
• 通过animation-delay控制三张图片的启动时间，实现循环依次切换
• 添加object-fit: cover确保图片完全填充容器，同时保持比例避免拉伸变形
• 调整动画关键帧，让每张图片有明确的淡入、停留、淡出阶段，切换更流畅

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