Related to JavaScript

Hello everyone, I have a little problem because I almost started programming in JavaScript, so I need help. The first page of HTML, the index page I need to take pictures appear one after the other, but each image to appear for 3 seconds after the start of the first picture(when user navigates link, page open and picture are visible after 3 seconds), when a last picture show, that it, no more loop again, all picture are visible (pictures only displayed when opening the index or reload). I googled and type some code but its not working, please can someone give mi a code or change my code:

<script type=“text/javascript”>
(function() {
var rotator = document.getElementById(‘rotator’);
var imageDir = ‘images/’;
var delayInSeconds = 3;
// list image names
var images = [‘image2.jpg’, ‘image3.jpg’, ‘image4.jpg’, ‘image1.jpg’];

var num = 0;
var changeImage = function() {
var len = images.length;
rotator.src = imageDir + images[num++];
if (num == len) {
num = 0;
setInterval(changeImage, delayInSeconds * 1000);


If you move the rotator assignment inside of the changeImage function then it should work for you.