title: Javascript: optimizing script for automatic changing image
body: <p>I have a simple Javascript script that is looping <strong>5 images</strong> in the background.</p>
  <p>The first image with class <strong>trainer01</strong> is already in the HTML file.</p>
  <p>My script working fine but I really need to optimize it and have it <strong>tidier</strong>. Now when I need to change seconds between transitions I need to change setTimeout for each change and then setInterval.</p>
  <p>So I need to have more tiny and optimized. Is there any option on how can I get it as written above?</p>
  <p><strong>MY SCRIPT:</strong></p>
  <pre><code>const herotrainers = document.getElementById(&quot;herotrainers&quot;);
  
  function trainerChanger() {
      setTimeout(
          function() {
              herotrainers.className = '';
              herotrainers.classList.add('trainer02');
      }, 3000);
  
      setTimeout(
          function() {
              herotrainers.className = '';
              herotrainers.classList.add('trainer03');
      }, 6000);
  
      setTimeout(
          function() {
              herotrainers.className = '';
              herotrainers.classList.add('trainer04');
      }, 9000);
  
      setTimeout(
          function() {
              herotrainers.className = '';
              herotrainers.classList.add('trainer05');
      }, 12000);
  
      setTimeout(
          function() {
              herotrainers.className = '';
              herotrainers.classList.add('trainer01');
      }, 15000);
  }
  
  trainerChanger();
  
  setInterval(function() {
      trainerChanger();
  }, 15000);
  </code></pre>