用js和css写一个图片跟文字一起轮播的代码

要实现一个JavaScript和CSS结合的图片轮播图，下面是一个简单的示例，包括图像和下方的文字描述。这个示例假设我们有一个包含图片和对应文字的数组：

<!-- HTML -->
<div class="carousel">
  <div class="carousel-item active">
    <img src="image1.jpg" alt="Image 1">
    <p>Image 1 Description</p>
  </div>
  <div class="carousel-item">
    <img src="image2.jpg" alt="Image 2">
    <p>Image 2 Description</p>
  </div>
  <!-- 更多图片... -->
</div>

<!-- CSS (SASS示例） -->
.carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-item {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.5s ease-in-out;
}

.carousel-item.active {
  display: block;
}

// JavaScript (使用jQuery为例)
$(document).ready(function() {
  const carouselItems = $('.carousel .carousel-item');

  function slideShow() {
    let current = 0;

    function nextSlide() {
      if (current == carouselItems.length - 1) {
        current = 0; // 起始位置
      } else {
        current++;
      }

      carouselItems.eq(current).stop().fadeIn(500); // 动态显示下一张图片
      carouselItems.not(carouselItems.eq(current)).fadeOut(500); // 淡出其他图片
    }

    setInterval(nextSlide, 3000); // 每隔3秒切换一次
  }

  slideShow();
});

这个示例中，`carousel`容器包含了图片和它们的文字描述。当页面加载时，`slideShow`函数启动了一个定时器，每隔一段时间会切换到下一张图片并淡入新的文字描述。注意这只是一个基本的示例，实际项目可能需要更复杂的逻辑，比如添加导航按钮或响应用户的鼠标操作。