title: Transitioning images on timer
body: <p>Firstly this is a school project with the requirements that no outside libraries can be used (such as JQuery) so only vanilla html, css and javascript.
  I am trying to create an image that will transition to another image after <em>x</em> seconds.</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>$(document).ready(function() {
  
    var timer;
    var sec = 1;
    var timeField = document.getElementById("time");
    var photo = document.getElementById("html_photo");
    timeField.innerHTML = "1";
    var photo_current = ["http://www.drodd.com/images15/1-15.jpg","http://www.drodd.com/images15/2-23.jpg","http://www.drodd.com/images15/3-12.jpg"];
  
    function update() {
      sec++;
      timeField.innerHTML = sec;
  
      if (sec == 30) sec = 0;
      
    }
  
    function changeImage() {
      if (sec == 1) {
        photo.src = photo_current[1];
      } else if (sec == 3) {
        photo.src = photo_current[2];
      } else if (sec == 5) {
        photo.src = photo_current[3];
      }
    }
  
    function start() {
      timer = setInterval(function() {
        update()
        changeImage()
      }, 1000);
    }
  
    start();
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body window.onload=function() {start();}&gt;
    &lt;div id="time"&gt;&lt;span&gt;1&lt;/span&gt;&lt;/div&gt;
  
    &lt;img src="http://www.drodd.com/images15/1-15.jpg" id="hml_photo"&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Thank You :)</p>