纯js文字和图片的轮播图代码

纯 JavaScript 实现文字和图片轮播图的一个简单示例通常会结合 HTML、CSS 和 JavaScript 来完成。这里是一个基本的实现，使用了数组存储图片源和文本，以及定时器控制切换：

HTML部分:

<div id="carousel">
  <div class="slide">文字内容 1</div>
  <div class="slide"><img src="image1.jpg" alt="图片1"></div>
  <div class="slide">文字内容 2</div>
  <div class="slide"><img src="image2.jpg" alt="图片2"></div>
</div>

CSS部分:

#carousel {
  position: relative;
  width: 100%;
}
.slide {
  display: none; /* 初始隐藏所有滑块 */
  position: absolute;
  left: 0;
}
.current-slide {
  display: block; /* 当前显示的滑块 */
}

JavaScript部分 (jQuery简化版):

var slides = $('.slide');
var currentIndex = 0;

function showSlide(index) {
  slides.eq(currentIndex).fadeOut('slow');
  slides.eq(index).fadeIn('slow').addClass('current-slide');
  currentIndex = index;
}

showSlide(0); // 初始展示第一张

// 定义轮播效果，每5秒切换一次
setInterval(function() {
  var nextIndex = (currentIndex + 1) % slides.length;
  if (nextIndex == 0) { // 如果到了最后一张，回到第一张
    showSlide(0);
  } else {
    showSlide(nextIndex);
  }
}, 5000);