Transitioning images on timer

Question

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 x seconds.

$(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();

});

<body window.onload=function() {start();}>
  <div id="time"><span>1</span></div>

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

Thank You :)

If you are not able to use jQuery, why are you using `$(document).ready()`? Your fiddle is failing because it can't find `$` which is from jQuery. Look at using https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload — Schleis, Jun 14 '17 at 14:02

D.Gaulin · Accepted Answer · 2017-06-14T14:26:29.780

here is a pure Javascript example:

HTML:

<img src="first_image.jpg" alt="blablabla"/>

Javascript

<script>

 var image = document.getElementsByTagName('img')[0];
 var image_to_show = 0;
 var image_container = ['first_image.jpg','second_image.jpg','third_image.jpg'];    //Put all the images you want


setInterval(function(){

if(image_to_show >= image_container.length -1)      //Return to the first one
{
    image_to_show = 0;  
}
else
{
    image_to_show++;
}

    image.src = image_container[image_to_show];

  },3000);



 </script>

And to link a JS file to your HTML file, you need to use this:

<script src="yourfile.js"></script>

score 1 · Answer 2 · answered Jun 14 '17 at 14:11

You can substitute the jQuery ready with DOMContentLoaded.

In order to address the elements of photo_current array you can use a modulus operation:

function changeImage() {
    var i = sec % 3;
    photo.src = photo_current[i];
}

Consider to avoid global variables.

var timer;
var sec = 1;
var timeField;
var photo;
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() {
    var i = sec % 3;
    photo.src = photo_current[i];
}

function start() {
    timer = setInterval(function() {
        update()
        changeImage()
    }, 1000);
}
document.addEventListener('DOMContentLoaded', function(e) {
    timeField = document.getElementById("time");
    photo = document.getElementById("hml_photo");
    timeField.innerHTML = "1";

    start();
})

#hml_photo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

<div id="time"><span>1</span></div>

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

score 0 · Answer 3 · answered Jun 14 '17 at 14:04

0

you can do this (but you need jquery) :

<script>
   $("image id or class or name").attr('src','image's src');
</script>

hope it will work . let me know

answered Jun 14 '17 at 14:04

Omid reza

370
5
17

I'm sorry this does not work as I specifically mentioned that I cannot use jQuery :) – JudasMoses Jun 14 '17 at 14:21

score 0 · Answer 4 · answered Jun 14 '17 at 14:07

There were some typos, I updated your fiddle: http://jsfiddle.net/4yhas10z/9/

Array starts from 0, not form 1

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];
    }
}

You had a typo in the id="html_photo", it was id="hml_photo".

You should not use window. in the markup (and in this case you should not use anything in the markup, since you're running the start function on document ready).

And - this applies only to jsFiddle - you forgot to load jQuery in the jsFiddle Javascript menu.

Transitioning images on timer

4 Answers4