CODEWITHSUNDEEP
javascripthtmlimage
user7104802
user7104802

Reputation:

change image on timer,

I know this question is asked frequently but I can not copy a code. I want the image to change after a time. I think I made a lot of wrong coding errors. Below is my code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <link rel="stylesheet" type="text/css" href="/css/styles.css">
    </head>
    <body>
        <img id="image" src="foto1.jpg">

        <script type = "text/javascript">
            var image=document.getElementById("image");

            function volgendefoto() {
                if (images==0) {
                    image.src="foto2";
                }

                if (images==1) {
                    image.src="foto2";
                }
                if (images==3) {
                    image.src="foto1";
                }
            }

            function timer(){
                setInterval(volgendefoto, 3000);
            }

            var images= [], x = -1;
            image[0]="foto1.jpg";
            image[1]="foto2.jpg";
            image[2]="foto3.jpg";
        </script>
    </body>
</html>

Thanks in advance for help,

Jasper

Upvotes: 4

Views: 18523

Answers (2)

ixpl0
ixpl0

Reputation: 756

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <link rel="stylesheet" type="text/css" href="/css/styles.css">
    </head>

    <body>
        <img id="image" src="foto1.jpg">

        <script type = "text/javascript">
            var image = document.getElementById("image");
            var currentPos = 0;
            var images = ["foto1.jpg", "foto2.jpg", "foto3.jpg"]

            function volgendefoto() {
                if (++currentPos >= images.length)
                    currentPos = 0;

                image.src = images[currentPos];
            }

            setInterval(volgendefoto, 3000);
        </script>
    </body>
</html>

Upvotes: 6

xShirase
xShirase

Reputation: 12389

You're not creating your interval, timer is never executed. Here's one that will loop your pictures, assuming that your first image is images is the one preloaded (eg: images[0] === image.src on page load) :

  const image=document.getElementById("image");
  let images= ["foto1.jpg","foto2.jpg","foto3.jpg"], i = 0;

  function volgendefoto() {
      i<images.length?i+=1:i=0; 
      image.src=images[i];
  }
  setInterval(volgendefoto, 3000);

Upvotes: 3

Related Questions