打开和关闭导航幻灯片时切换文本淡入淡出

<div class="slideshow">
  <img src="slide1.jpg" alt="Slide 1">
  <div class="text">Text 1</div>
</div>

.slideshow {
  position: relative;
  width: 800px;
  height: 400px;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.5s;
}

var slides = document.querySelectorAll('.slideshow');
var texts = document.querySelectorAll('.text');

function toggleSlide(index) {
  for (var i = 0; i < slides.length; i++) {
    slides[i].style.display = 'none';
    texts[i].style.opacity = 0;
  }
  
  slides[index].style.display = 'block';
  texts[index].style.opacity = 1;
}

// 示例：点击导航按钮切换到下一张幻灯片
var currentIndex = 0;
var nextIndex = (currentIndex + 1) % slides.length;
toggleSlide(nextIndex);