如何用简单jQuery实现带文字的全屏背景图片轮播（含过渡延迟）

基于你给出的HTML结构，我们可以通过CSS布局搭配简单的jQuery逻辑，快速实现图片全屏铺满、文字悬浮在图片上方，且切换时带延迟过渡的效果。

第一步：基础CSS布局（搞定全屏+文字定位） #

先写CSS让图片铺满页面，同时把文字定位到图片上方：

/* 清除默认边距和内边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body, html {
  height: 100%;
  overflow: hidden; /* 禁止页面滚动 */
}
#slideshow {
  list-style: none;
  position: relative;
  width: 100%;
  height: 100%;
}
#slideshow li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; /* 默认隐藏所有轮播项 */
  transition: opacity 1s ease-in-out; /* 图片过渡动画 */
}
#slideshow li.active {
  opacity: 1; /* 当前显示的轮播项设为可见 */
}
#slideshow img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片铺满容器，保持比例不拉伸变形 */
}
#slideshow span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 文字居中 */
  color: #fff;
  font-size: 2rem;
  text-shadow: 0 0 10px rgba(0,0,0,0.8); /* 文字加阴影增强可读性 */
  opacity: 0;
  transition: opacity 0.8s ease-in-out; /* 文字单独设置过渡动画 */
}
#slideshow li.active span {
  opacity: 1; /* 当前轮播项的文字同步显示 */
}

第二步：jQuery控制轮播切换逻辑 #

用定时器实现轮播项的自动切换，带延迟效果：

$(document).ready(function() {
  // 初始化：默认显示第一个轮播项
  $('#slideshow li:first').addClass('active');
  
  // 设置轮播间隔（这里是3秒，可自行调整数值）
  setInterval(function() {
    // 获取当前正在显示的轮播项
    var currentActive = $('#slideshow li.active');
    // 获取下一个要显示的项，最后一项之后回到第一个
    var nextItem = currentActive.next().length ? currentActive.next() : $('#slideshow li:first');
    
    // 切换active类，实现轮播切换
    currentActive.removeClass('active');
    nextItem.addClass('active');
  }, 3000);
});

简单说明 #

• CSS里的transition属性负责实现淡入淡出的过渡效果，图片和文字的过渡时长可以单独调整，我这里设置文字过渡比图片稍快一点，你可以按需修改数值。
• object-fit: cover保证图片铺满整个页面的同时，不会拉伸变形，只会裁剪超出部分，视觉效果更自然。
• jQuery的逻辑很简单：用定时器定时切换active类，依靠CSS的过渡属性自动触发动画，不需要复杂的动画函数。

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