定時器在幻燈片放映

Question

所以我成立了一個幻燈片，顯示是這樣的：

焦耳/ S：

<script> 
     $(document).ready(function() {   
      var count = $(".slider_class").length; 

      var i=0; 
      while (i < count){ 
       $(".slider_bullets").append('<a href="#" id="bullet_link_' + i +'" class="slider_bullet_btn"></a>'); 
       $(".slider_bullets a").click(function(){ $(".slider_class").hide(); $("#slide_"+$(this).index()).show(); });    
       $(".slider_bullets a").click(function(){ $(".slider_bullet_btn").removeClass("selected_bullet"); }); 
       $(".slider_bullets a").click(function(){ $(this).addClass("selected_bullet"); }); 

       i++; 
      } 
      $("#slide_0").show(); 
      $("#bullet_link_0").addClass("selected_bullet"); 
     }); 
     </script> 

HTML：

<div id="slide_0" class="slider_class"> 
      <div class="slider_profile_info"><h2>John Smith</h2><p>Phasellus at libero sem, non sodales velit. Proin vitae metus sed diam euismod tempus. In varius diam ut enim adipiscing aliquet.</p><img src="img/learn_more.jpg" alt="learn_more" width="152" height="35" class="learn_more_btn" /></div><div class="slider_profile_img"><img src="img/slider_overlay.png" alt="slider_overlay" width="710" height="359" /></div> 
      </div> 


      <div id="slide_1" class="slider_class"> 
      <div class="slider_profile_info"><h2>John Smith</h2><p>Phasellus at libero sem, non sodales velit. Proin vitae metus sed diam euismod tempus. In varius diam ut enim adipiscing aliquet.</p><img src="img/learn_more.jpg" alt="learn_more" width="152" height="35" class="learn_more_btn" /></div><div class="slider_profile_img"><img src="img/slider_overlay.png" alt="slider_overlay" width="710" height="359" /></div> 
      </div> 


      <div id="slide_2" class="slider_class"> 
      <div class="slider_profile_info"><h2>John Smith</h2><p>Phasellus at libero sem, non sodales velit. Proin vitae metus sed diam euismod tempus. In varius diam ut enim adipiscing aliquet.</p><img src="img/learn_more.jpg" alt="learn_more" width="152" height="35" class="learn_more_btn" /></div><div class="slider_profile_img"><img src="img/slider_overlay.png" alt="slider_overlay" width="710" height="359" /></div> 
      </div><div class="slider_bullets"></div> 

但現在我想補充一個計時器循環瀏覽所有不同的幻燈片。我知道如何用固定數量的幻燈片來完成此操作，但我無法想象我將如何處理幻燈片數量未知的幻燈片。我嘗試過使用setInterval，但我無法弄清楚如何獲取下一張幻燈片ID以便顯示它。有任何想法嗎？

Answer 1

，你可以這樣做：

$(document).ready(function() {   
     var count = $(".slider_class").length; 
     $("#slide_0").show(); 
     var currentSlide = 0; 
     var interval = setInterval(function(){ 
      if (++currentSlide > count) 
       currentSlide = 1; 
      console.log(currentSlide); 
      $('.slider_class').hide(); 
      $('.slider_class:nth-child(' + currentSlide + ')').show(); 
     }, 1000); 
    }); 

這將對於任何幻燈片的數，您有