setInterval（）で再帰を停止する方法。 Javascriptを

<!DOCTYPE html> 
 
<html> 
 
<title>test</title> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
 
<style> 
 
.mySlides {display:none;} 
 
</style> 
 
<body> 
 

 
<h2 class="w3-center">Slideshow test</h2> 
 

 
<div class="w3-content w3-section" style="max-width:500px"> 
 
    <img class="mySlides" src="1.jpg" style="width:100%"> 
 
    <img class="mySlides" src="2.jpg" style="width:100%"> 
 
    <img class="mySlides" src="3.jpg" style="width:100%"> 
 
    <img class="mySlides" src="4.jpg" style="width:100%"> 
 
</div> 
 

 
<p id="demo"><p> 
 

 
<script> 
 
var Index = 0; 
 
var x = document.getElementsByClassName("mySlides"); 
 

 
(Index <4) ? setInterval(slide,500):display(Index-1); 
 

 

 
function slide() { 
 
    var i; 
 
    for (i = 0; i < x.length; i++) { 
 
     x[i].style.display = "none"; 
 
    } 
 
    Index++; 
 
    document.getElementById('demo').innerHTML = Index-1; 
 
    x[Index-1].style.display = "block";  
 
} 
 

 
function display(n) { 
 
    x[n].style.display = "block"; 
 
} 
 
</script> 
 

 
</body> 
 
</html>

私がしたsetInterval（による一連の画像を表示したいが）。結局、最後の画像が表示されるはずです。問題は実行後、画像がありません。私は変数 'インデックス'は依然として1増加し続けると確信しています。私は理由を知りません...

出典

2017-12-12 Oreodad

あなたがslide' 'の呼び出しを停止する方法を知りたい場合は、変数に' setInterval'（例えば 'intervalHandler'）の戻り値を割り当てる必要がありますし、'てclearIntervalを行います（intervalHandler） '' Index'が 'x.length'に等しい場合に発生します。これは 'slide'関数の最後で行うことができます。 –

あなたのコードはを停止する方法が必要ですclearInterval。デモ用にimagesをdivsに変更しました。

var index = 0; 
 
var x = document.getElementsByClassName("mySlides"); 
 

 
function displayNextSlide() { 
 
    for (var i = 0; i < x.length; i++) { 
 
    if (i === index) { 
 
     x[i].style.display = "block"; 
 
    } else { 
 
     x[i].style.display = "none"; 
 
    } 
 
    } 
 
    index++; 
 
    if (index == x.length) { 
 
    clearInterval(interval); 
 
    } 
 
} 
 
displayNextSlide(); 
 
var interval = setInterval(displayNextSlide, 500)

<!DOCTYPE html> 
 
<html> 
 
<title>test</title> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
 
<style> 
 
    .mySlides { 
 
    display: none; 
 
    } 
 
</style> 
 

 
<body> 
 

 
    <h2 class="w3-center">Slideshow test</h2> 
 

 
    <div class="w3-content w3-section" style="max-width:500px"> 
 
    <div class="mySlides" src="1.jpg" style="width:100%">1</div> 
 
    <div class="mySlides" src="2.jpg" style="width:100%">2</div> 
 
    <div class="mySlides" src="3.jpg" style="width:100%">3</div> 
 
    <div class="mySlides" src="4.jpg" style="width:100%">4</div> 
 
    </div>

出典

2017-12-12 16:15:09

setInterval（）で再帰を停止する方法。 Javascriptを

答えて

関連する問題