title: how can stop change photo in html
body: <p>I want to help to make this code execution stops after just three times for?</p>
  
  <p>I have three photos and want to change for three times and stop</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
     &lt;head&gt;
        &lt;title&gt;change picture&lt;/title&gt;
        &lt;script type = "text/javascript"&gt;
            function displayNextImage() {
                x = (x === images.length - 1) ? 0 : x + 1;
                document.getElementById("img").src = images[x];
            }
  
            function displayPreviousImage() {
                x = (x &lt;= 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";
        &lt;/script&gt;
     &lt;/head&gt;
  
     &lt;body onload = "startTimer()"&gt;
         &lt;img id="img" src="1.jpg"/&gt;
         &lt;button type="button" onclick="displayPreviousImage()"&gt;Previous&lt;/button&gt;
         &lt;button type="button" onclick="displayNextImage()"&gt;Next&lt;/button&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>can you help me?</p>