帮我用js css写一个图片和文字一起的轮播图

在JavaScript和CSS中创建一个简单的图片轮播图，你可以使用HTML、CSS以及一些基本的JavaScript库如jQuery或纯JavaScript来实现。下面是一个基本的示例：

首先，在HTML里设置轮播图的基本结构：

<div class="carousel-container">
  <div class="slide active">
    <img src="image1.jpg" alt="Slide 1">
    <p>Slide 1 文字描述</p>
  </div>
  <div class="slide">
    <img src="image2.jpg" alt="Slide 2">
    <p>Slide 2 文字描述</p>
  </div>
  <!-- 添加更多滑动项 -->
</div>

然后，用CSS来布局和样式化：

.carousel-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.slide {
  display: none; /* 初始隐藏 */
  position: absolute;
  top: 0;
  left: 0;
}

.slide.active {
  display: block; /* 当前滑动显示 */
}

最后，我们可以添加一个简化的JavaScript部分来切换图片和文本：

function slideShow() {
  var slides = document.querySelectorAll('.slide');
  var index = 0;

  function showNextSlide() {
    slides[index].classList.remove('active');
    index++;
    if (index >= slides.length) index = 0; // 如果已到最后一张，重置到第一张
    slides[index].classList.add('active');
    setTimeout(showNextSlide, 3000); // 每隔3秒切换一次
  }

  showNextSlide();
}

// 运行轮播图
slideShow();

这个例子只是一个基础版，实际项目中可能需要更复杂的动画效果、导航按钮控制和响应式设计。如果你想使用现成的插件，可以考虑Bootstrap Carousel或Slick等。