Question

How can I make a loop to toggle between these two functions continuously? Moreover, is there a way I can use 1 function and link as many pictures as I want?

<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> 

I’m really trying to do this, I’ve done 60 tutorials in jQuery from thenewboston. I was trying to do this without “cheating” but I just cannot make this work.

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

DEMO with background color change, will also work for image change