定时器在幻灯片放映

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); 
    }); 

这将对于任何幻灯片的数，您有