jquery - 如何链接 2 个 setInterval 函数来制作一个简单的背景图像滑块——连续滑动？

Question

如何制作循环以连续在这两个功能之间切换？此外，有没有一种方法可以使用 1 个功能并链接任意数量的图片？

<script  type="text/javascript">

        $(document).ready(function(){

 setInterval('spinna()', 3000);
 setInterval('spinna2()', 6000);

        });
                function spinna(){

                        $('#header_bg').css({                           
                            'background-image' : 'url(' + '<?php echo get_template_directory_uri(); ?>/library/images/bg2.jpg' + ')'                        
                        });             
                }   
                        function spinna2(){
                         $('#header_bg').css({                          
                            'background-image' : 'url(' + '<?php echo get_template_directory_uri(); ?>/library/images/scrib.jpg' + ')'                      
                    });

        }   

</script> 

我真的很想这样做，我已经从thenewboston用 jQuery 完成了 60 个教程。我试图在没有“作弊”的情况下做到这一点，但我无法做到这一点。

Answer 1

$(document).ready(function(){
   setInterval(spinna, 3000);


   var index = 0,
       imgs = ['bg2.jpg', 'scrib.jpg'];
    function spinna(){
          $('#header_bg').css({                
              'background-image' : 'url(' + '<?php echo get_template_directory_uri(); ?>/library/images/'+ imgs[index] +'' + ')';              
          });             
        index == 0 ? index = 1 : index = 0;       
     }   
  });

带有背景颜色变化的演示，也适用于图像变化