どのようにhtmlの変更写真を停止することができます

私は3回だけこのコードの実行を停止するのを助けたいですか？どのようにhtmlの変更写真を停止することができます

私は写真3枚を持っており、3回変更し、

<!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="1.jpg"/> 
     <button type="button" onclick="displayPreviousImage()">Previous</button> 
     <button type="button" onclick="displayNextImage()">Next</button> 
    </body> 
</html>

を停止したいあなたは私を助けることができますか？

出典

2016-03-20 Mona Ahmad

質問するときに関連するタグを（すべて）追加してください。そうすれば、より多くの人々が手を差し伸べることができ、あなたを助けてくれるでしょう。 HTMLは実際にこの質問については何もない、それはjavascriptでなければならない。がんばろう！ – SND

'clearInterval'メソッドを使用する必要があります。[w3schools.com Window clearInterval（）メソッド]（http://www.w3schools.com/jsref/met_win_clearinterval.asp） – Spidey

clearIntervalを使用してsetInteval機能を停止します。

<!DOCTYPE html> 
 

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

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

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

 
     var images = [], x = -1; 
 
     images[0] = "http://i.stack.imgur.com/0qVbB.jpg"; 
 
     images[1] = "http://i.stack.imgur.com/Z4D6Z.jpg"; 
 
     images[2] = "http://i.stack.imgur.com/JbyGx.jpg"; 
 
    </script> 
 
    </head> 
 

 
    <body onload = "startTimer()"> 
 
    <img id="img" src="http://i.stack.imgur.com/0qVbB.jpg"/> 
 
    <button type="button" onclick="displayPreviousImage()">Previous</button> 
 
    <button type="button" onclick="displayNextImage()">Next</button> 
 
    </body> 
 
</html>

出典

2016-03-20 08:37:53

この回答はあなたの質問ですか？ –

はい。助けてくれてありがとう –

私は聞いて嬉しいです:) [回答]（それでは、それを受け入れてください（http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work#5235）他の人に役立つでしょう。 –

この問題はすでにhere（受け入れ答え、2番目のコードブロックを）解決しました！

出典

2016-03-20 09:04:04

どのようにhtmlの変更写真を停止することができます

答えて

関連する問題