Change Image in HTML Page Every Few Seconds

How to change an image every 5 seconds for example?

you should run 'change' function outside of the func and pass the function name to the setInterval func as below

let images = ['photoFromInternet', 'photoFromInternet2', 'photoFromInternet3'];

let index = 0;
const imgElement = document.querySelector('#mainPhoto');

function change() {
   imgElement.src = images[index];
   index > 1 ? index = 0 : index++;
}

window.onload = function () {
    setInterval(change, 5000);
};

Change image in HTML page every few seconds

As I posted in the comment you don't need to use both setTimeout() and setInterval(), moreover you have a syntax error too (the one extra }). Correct your code like this:

(edited to add two functions to force the next/previous image to be shown)

<!DOCTYPE html>

<html>
   <head>
      <title>change picture</title>
      <script type = "text/javascript">
          function displayNextImage() {
              x = (x === images.length - 1) ? 0 : x + 1;
              document.getElementById("img").src = images[x];
          }

          function displayPreviousImage() {
              x = (x <= 0) ? images.length - 1 : x - 1;
              document.getElementById("img").src = images[x];
          }

          function startTimer() {
              setInterval(displayNextImage, 3000);
          }

          var images = [], x = -1;
          images[0] = "image1.jpg";
          images[1] = "image2.jpg";
          images[2] = "image3.jpg";
      </script>
   </head>

   <body onload = "startTimer()">
       <img id="img" src="startpicture.jpg"/>
       <button type="button" onclick="displayPreviousImage()">Previous</button>
       <button type="button" onclick="displayNextImage()">Next</button>
   </body>
</html>

Change image in HTML page every few seconds using Javascript

This version has links as well. Try this JS FIDDLE

<a id='bannerLink1' href="#"><img src="" id='img1' ></a>
<a id='bannerLink2' href="#"><img src="" id='img2' ></a>
<a id='bannerLink3' href="#"><img src="" id='img3' ></a>

<script>
var images = ["http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG1&w=327&h=420", "http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG2&w=327&h=420", "http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG3&w=327&h=420",
              "http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG4&w=327&h=420", "http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG5&w=327&h=420","http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG6&w=327&h=420","http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG7&w=327&h=420"
             ];

var links = ["http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG1&w=327&h=420", "http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG2&w=327&h=420", "http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG3&w=327&h=420",
              "http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG4&w=327&h=420", "http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG5&w=327&h=420","http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG6&w=327&h=420","http://placeholdit.imgix.net/~text?txtsize=85&bg=ef4135&txtclr=ffffff&txt=IMG7&w=327&h=420"
             ];
var i = 0;
var renew = setInterval(function(){
        if(i==images.length) i=0;
        document.getElementById("img1").src = images[i]; 
        document.getElementById("bannerLink1").href=links[i];
        if(i+1==images.length) i=-1;
        document.getElementById("img2").src = images[i+1];
        document.getElementById("bannerLink2").href=links[i+1];
        if(i+2==images.length) i=-2;
        document.getElementById("img3").src = images[i+2];
        document.getElementById("bannerLink3").href=links[i+2];
        i+=3;

},1000);
</script>

How to change an image every 15 seconds in HTML

Firstly include jQuery library in your page.

Then use this script:

$(document).ready(function() {
    setInterval(function(){
        _path = $('img').attr('src');
        _img_id = _path.replace('img/img', '');
        _img_id = _img_id.replace('.jpg', '');

        _img_id++;

        if (_img_id == 3) {
            _img_id = 1;
        };

        $('img').attr('src', 'img/img' + _img_id + '.jpg');
    }, 15000);
});

Changing the image size on image display that changes every few seconds

It can be done with css. Wrap image in div, set it's dimensions and decide how to display image.

If you want to stretch image to fit the div then set both width and height of image to 100%

#img-box {  width: 400px;  height: 400px;  border: 1px solid black; }#img-box img {  max-width: 100%;  max-height: 100%;   }

<!DOCTYPE html>
<html>
<head>  <title>change picture</title>  <script type="text/javascript">    function displayNextImage() {      x = (x === images.length - 1) ? 0 : x + 1;      document.getElementById("img").src = images[x];    }
    function displayPreviousImage() {      x = (x <= 0) ? images.length - 1 : x - 1;      document.getElementById("img").src = images[x];    }
    function startTimer() {      setInterval(displayNextImage, 3000);    }
    var images = [],      x = -1;    images[0] = "https://upload.wikimedia.org/wikipedia/commons/a/a9/Bristol_MMB_%C2%AB42_River_Avon.jpg";    images[1] = "https://upload.wikimedia.org/wikipedia/commons/1/19/Finsternis_Natur.jpg";    images[2] = "https://upload.wikimedia.org/wikipedia/commons/8/8c/Black_CL.png";  </script></head>
<body onload="startTimer()">  <div id="img-box">    <img id="img" src="https://upload.wikimedia.org/wikipedia/commons/0/03/Electricsheep-29142.jpg" />  </div>  <button type="button" onclick="displayPreviousImage()">Previous</button>  <button type="button" onclick="displayNextImage()">Next</button></body>
</html>

Pop up images on the page every few seconds

In the HTML file you should create a div with an id disclaimer

<div id="disclaimer"></div>

Then in the js file you should select the HTML element out of the popup function

const el =  document.getElementById("disclaimer");

And create an enter code hereimage element out of the popup function

const img = document.createElement('img')

Then in the popup function you should create a random image every time the function get called with setTimeout to change the image src, set attribute src for image with random image number from images array, and append an image element to the div in HTML file
and call setTimeout with hidepop

function popup() {
  randomImage = Math.floor(Math.random() * images.length)
  img.setAttribute('src', images[randomImage])
  img.setAttribute('alt', 'random')
  el.appendChild(img);
  setTimeout(hidePopup, 1000);
}

Then create a hidepop()

function hidePopup() {
  setTimeout(popup, 1000);
}

And call popup function

popup()

Note :
In setTimeout function don't call the handler like that

setTimeout(hidePopup(), 1000);

that will cause Maximum call stack size exceeded error and you app will crashed