[jQuery] 文字を交互に表示するDEMO

<div id="header-text">
  <div id="text-1" class="text-item">テキスト1だよ</div>
  <div id="text-2" class="text-item none">テキスト2だよ</div>
  <div id="text-3" class="text-item none">テキスト3だよ</div>
</div>

<style>
  .none {
    display: none;
  }
  #header-text {
    background: #6370c1;
    padding: 10px;
    color: #fff;
    text-align: center;
  }
</style>

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
    $(function() {
        window.setInterval(toggleText, 3000);
    });

    let current_index = 1;
    let next_index = current_index + 1;
    const max_count = $('.text-item').length;

    function toggleText() {
       $("#header-text").find(`#text-${current_index}`).fadeOut('slow', function() {
            $("#header-text").find(`#text-${next_index}`).fadeIn(600);
            current_index = next_index;
            next_index++;
            if(next_index > max_count){
                next_index = 1;
            }
        });
    }
</script>