slideshow

HTML

<img id="myImage" src="">
<form action="">
    <input id="button1" type="radio" name="slideshow" value="">
    <input id="button2" type="radio" name="slideshow" value="">
    <input id="button3" type="radio" name="slideshow" value="">
</form>

CSS

body {
    text-align: center;
}
#myImage {
    height: 300px;
    width: 500px;
}

JavaScript

//Each of these buttons should call the Change Image Function, passing a differet parameter.
document.getElementById("button1").onclick = function(){

    //clearInterval(changeSlide);
    console.log('change image 1');
    changeImage("http://placekitten.com/500/300");

}

document.getElementById("button2").onclick = function(){
    //clearInterval(changeSlide);
    console.log('change image 2');
    changeImage("http://placekitten.com/500/301");

}

document.getElementById("button3").onclick = function(){
    //clearInterval(changeSlide);
    console.log('change image 3');
    changeImage("http://placekitten.com/502/300");

}
  function slideIt() {
  //display first image in slideshow initially
  document.getElementById('button1').click();
  changeImage("http://placekitten.com/500/300");

  //every 3 seconds, check current image and display the next one
  setInterval(function() {
      if (document.getElementById('button1').checked == true) {
          document.getElementById('button2').click();
          changeImage("http://placekitten.com/500/301");
      }
      else if (document.getElementById('button2').checked == true) {
          document.getElementById('button3').click();
          changeImage("http://placekitten.com/502/300");
      } 
      else if (document.getElementById('button3').checked == true) {
          document.getElementById('button1').click();
          changeImage("http://placekitten.com/500/300");
      }  
      else {
          //do nothing
      }
      console.log('clicked');
  }, 3000);
}

slideIt();

/*This function changes the picture when one of the 3 buttons is pressed*/
function changeImage(source) {
  document.getElementById("myImage").src = source;
}