Hide and show div after a certain time

Question

I am creating the screen of a system that will show some graphics and will be displayed on a TV. There are two class one . screen-01 and another call . screen-02 this with display:None. I would like you to keep changing between these two screens every 10 seconds, the examples I found on the internet only works once, so load the screen.

Answer 1

Would basically be a if alternating the two divs with .hide and .show() using setInterval:

$(document).ready(function(){
   setInterval(function(){
      
      if($(".tela-01").is(":visible")){
         $(".tela-01").hide();
         $(".tela-02").show();
      }else{
         $(".tela-02").hide();
         $(".tela-01").show();
      }
      
   }, 10000);
});

.tela-02{
   display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tela-01">Tela 1</div>
<div class="tela-02">Tela 2</div>

A form without if:

$(document).ready(function(){
   setInterval(function(){

      var tela = "[class^='tela-']:";

      $(tela+"visible").hide("fast", function(){
         $(tela+"hidden")
         .not(this)
         .show();
      });
      
   }, 10000);
});

.tela-02{
   display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tela-01">Tela 1</div>
<div class="tela-02">Tela 2</div>