Timer - Photos

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
<body>
  <div id="time"><span>1</span></div>

  <img src="http://www.drodd.com/images15/1-15.jpg" id="html_photo">
</body>

JavaScript

$(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[0];
    } else if (sec == 3) {
      photo.src = photo_current[1];
    } else if (sec == 5) {
      photo.src = photo_current[2];
    }
  }

  function start() {
    timer = setInterval(function() {
      update()
      changeImage()
    }, 1000);
  }

  start();
	
});