简单 Javascript 幻灯片放映（我知道这已经过时了），让下一张幻灯片 属性 在当前幻灯片中显示

Question

我正在构建一个简单的幻灯片，我只需要下一张幻灯片的属性显示在当前幻灯片上，这样我就可以说“下一张幻灯片：[一些标题]”

到目前为止的 JS 代码

var slides = document.querySelectorAll('.bannerSlides .bannerSlide');
var currentSlide = 0;

var slideInterval = setInterval(nextSlide,2000);

function nextSlide(){
  slides[currentSlide].className = 'bannerSlide';
 currentSlide = (currentSlide+1)%slides.length;
 slides[currentSlide].className = 'bannerSlide showing';


// Need to get H4 prop from the next slide and show it on the current slide
}

HTML 到目前为止

 <div class="bannerSlides">
   <div class="bannerSlide">
    <h4>Slide One</h4>
    <div class="nextSlideIs">Next slide is: [next slide h4 here]</div>
  </div>
   <div class="bannerSlide">
   <h4>Slide Two</h4>
     <div class="nextSlideIs">Next slide is: [next slide h4 here]</div>
   </div>
  
  <!-- etc. -->
 </div>

Answer 1

var slides = document.querySelectorAll('.bannerSlides .bannerSlide');
[...slides].forEach( (slide, index) => {
  // get the "first" slide if there is no next slide
  var nextSlide = slides[index +1] || slides[0] ;
  slide.querySelector('.nextSlideIs').innerHTML = `Next slide is: ${nextSlide.querySelector('h4').innerHTML}`;
});

<div class="bannerSlides">
   <div class="bannerSlide">
    <h4>Slide One</h4>
    <div class="nextSlideIs">Next slide is: [next slide h4 here]</div>
  </div>
  <div class="bannerSlide">
    <h4>Slide Two</h4>
    <div class="nextSlideIs">Next slide is: [next slide h4 here]</div>
  </div>
  <div class="bannerSlide">
    <h4>Slide Three</h4>
    <div class="nextSlideIs">Next slide is: [next slide h4 here]</div>
  </div>

  <!-- etc. -->
 </div>