简单的js幻灯片上加字

要在简单的JavaScript幻灯片上添加文字，可以通过HTML和CSS来实现。以下是一个基础的示例，展示了如何在幻灯片中添加文字，并使用JavaScript来控制幻灯片的切换。

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>幻灯片示例</title>
<style>
  .slideshow-container {
    position: relative;
    max-width: 600px;
    margin: auto;
  }
  .slide {
    display: none;
    position: relative;
  }
  .active {
    display: block;
  }
  .text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 30px;
    text-align: center;
  }
</style>
</head>
<body>

<div class="slideshow-container">
  <div class="slide active">
    <img src="image1.jpg" style="width:100%">
    <div class="text">这是第一张幻灯片的文字</div>
  </div>
  
  <div class="slide">
    <img src="image2.jpg" style="width:100%">
    <div class="text">这是第二张幻灯片的文字</div>
  </div>
  
  <div class="slide">
    <img src="image3.jpg" style="width:100%">
    <div class="text">这是第三张幻灯片的文字</div>
  </div>
</div>

<script>
var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("slide");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  slides[slideIndex-1].style.display = "block";  
  setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>

</body>
</html>

解释

HTML结构：创建一个包含多个div的容器，每个div代表一张幻灯片。每张幻灯片内包含一张图片和一个用于显示文字的div。
CSS样式：
- .slideshow-container：设置幻灯片容器的基本样式。
- .slide：默认隐藏所有幻灯片。
- .active：当前显示的幻灯片的类。
- .text：设置文字的位置和样式，使其居中显示在图片上。