Changing images using delays

I’m trying to figure out how to make an animation using the order of three images.

The default image is “image1.png” that always shows when the page loads.

1. After every 5 seconds, the variable “back.src” must abruptly change to image2.png, so without fading. The default is image1.png

2. And then after 0.5 seconds, the variable again changes but then to image3.png.

3. 0.5 seconds later it changes back to image2.png

4. and 0.5 later again back to image1.png.

This is to be repeated in a loop because I want to repeat the process again after 5 seconds.

My problem is, I don't know if structuring this code is the best way to go about it. How would my code need to look based on the requirement explained above?

Here's my code of what I've got so far:

var back = new Image();
back.src = "image1.png";
        function wait(miliseconds) {
            var currentTime = new Date().getTime();
            while (currentTime + miliseconds >= new Date().getTime()) {
            }
        }

        function image1() {
            wait(5000);
            back.src = "image2.png";
        }

        function image2() {
            wait(500);
            back.src = "image3.png";
        }

        function image3() {
            wait(500);
            back.src = "image2.png";
        }


function animate(){
    ctx.save();
    ctx.clearRect(0, 0, cW, cH);
    ctx.drawImage(back,0,0);        
    ctx.restore();
}
var animateInterval = setInterval(animate, 30);