javascript - 幻灯片放映计时器

Question

所以我设置了一个幻灯片来显示如下:

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

无论您拥有多少张幻灯片，这都适用