title: How to add different timers for specific images?
body: <p>I've been working on this traffic light code for a few weeks now and I have finally made it work automatically with a set timer. However, now I want to make it more realistic by giving each image in my array a specific time so e.g. green light is viewed for 5 seconds, yellow for 3 and so on.</p>
  
  <p>Current code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var list = ["only red1.jpg","red-yellow 2.jpg", "green3.jpg","yellowonly4.jpg"];
      var nextlight = 0;
      var timer;
      function ChangeLight() {
        nextlight = nextlight + 1;      
        if (nextlight == list.length) 
          nextlight = 0;      
        var firstlight = document.getElementById('traffic');     
        firstlight.src = list[nextlight]; 
      } 
  
  
       timer = setInterval(ChangeLight,1000);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt; 
  &lt;html&gt; 
  &lt;body&gt;  
    
    &lt;h1&gt;JavaScript Code&lt;/h1&gt; 
    &lt;p&gt;Traffic Light&lt;/p&gt; 
    
  &lt;img id="traffic" src="only red1.jpg"&gt;
    &lt;button type="button" onclick="ChangeLight()"&gt;Change Light&lt;/button&gt;   
  &lt;/body&gt; 
  &lt;/html&gt;  </code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm a javascript newbie so please no over complicated code and thank you for any help.</p>