自動と手動のスライドショー

自動と手動の両方で動作するスライドショーを作成する必要があります。自動と手動のスライドショー

マニュアルの部分には、画像間の一定の時間を待たずに写真を見ることができる次と前の2つのボタンがあります。

ボタンをクリックしないと、スライドショーは自動的に実行され、6秒後に画像が変化します（例：）。

私の問題は、前の/次のボタンをクリックすると、画像がより速く表示され始めるか、複数の画像が画面に表示されることです。ここで

は、私が働いているコードです：

var slideIndex = 1; 
 
showSlides(slideIndex); 
 

 
function plusSlides(n) { 
 
    showSlides(slideIndex += n); 
 
} 
 

 
function showSlides(n) { 
 
    var i; 
 
    var slides = document.getElementsByClassName("hidden"); 
 

 
    if (n===undefined){n= ++slideIndex;} 
 
    if (n > slides.length) {slideIndex = 1;} 
 
    if (n < 1) {slideIndex = slides.length} 
 

 
    $(slides[slideIndex-1]).fadeIn(2000); 
 
    slides[slideIndex-1].style.display = "block"; 
 
    $(slides[slideIndex-1]).delay(3000); 
 
    $(slides[slideIndex-1]).fadeOut(1000); 
 

 
    setTimeout(showSlides, 6000); 
 
}

.hidden { 
 
    display: none; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <title>jQuery</title> 
 
    <link rel="stylesheet" href="lab5.css" media="screen" title="no title"> 
 
</head> 
 
<body> 
 
    <h1 class="titlu">Goodies</h1> 
 
    <div align="center"> 
 
    <button class="button" onclick="plusSlides(-1)" >Previous</button> 
 
    <button class="button" onclick="plusSlides(1)" >Next</button> 
 
    </div> 
 
    <div class="hidden"> 
 
    <h4 class="num" > 1/5 </h4> 
 
    <img src="http://placehold.it/150x150?text=1"> 
 
    </div> 
 
    <div class="hidden"> 
 
    <h4 class="num"> 2/5 </h4> 
 
    <img src="http://placehold.it/150x150?text=2"> 
 
    </div> 
 
    <div class="hidden"> 
 
    <h4 class="num"> 3/5 </h4> 
 
    <img src="http://placehold.it/150x150?text=3"> 
 
    </div> 
 
    <div class="hidden"> 
 
    <h4 class="num"> 4/5 </h4> 
 
    <img src="http://placehold.it/150x150?text=4"> 
 
    </div> 
 
    <div class="hidden"> 
 
    <h4 class="num"> 5/5 </h4> 
 
    <img src="http://placehold.it/150x150?text=5"> 
 
    </div> 
 
</body> 
 
</html>

私は6秒毎にI後の画像を示し、その「速さ」にスライドショーの復帰を作ることができる方法はあります前/次をクリックしますか？

また、一度に複数の画像が表示されないようにするにはどうすればよいですか？

出典

2016-11-16 user7167081

ほんの少しの発言：（！N）あなたは、if {...} 'の代わりに' '{...}（nは未定義===）場合は'使用することができます。それはより短くて読みやすいです。 –

@CommercialSuicide、私はそれをお勧めしません。特に数値や、値が偽であるかもしれない種類のもの（例えば、0、 ''）を扱う場合は、 '！0 === true'としてください。 – JanS

@JanS、確かに、誰かが 'if（！n）{...}'構造を使いたい場合、彼は**強制**とプリミティブの動作について知る必要があります –

何が起きているのは、複数のタイマーを起動させているため、コールバック関数が実行される頻度よりも多くなるためです。だから、あなたが適切な場合には、タイマーを取り消すことができることを

timer = setTimeout(showSlides, 6000);

：

var timer = null; // Do this in a scope that is accessible to all your relevant functions

...その後：

は、あなたは、あなたのタイマーから返される整数をキャプチャすることを確認する必要があります：

clearTimeout(timer);

あなたはbuをクリックするとタイマーをクリアしたいでしょうttonを実行すると自動的に実行されなくなり、新しいタイマーを起動することができます。実行中のタイマーは1つだけです。

出典

2016-11-16 17:54:42

ありがとう！私はまたこれを加えなければならなかった： 'for（i = 0; i user7167081

-1

ここに、スコットが提案したタイマー付きの自動スライドショーと手動スライドショーの作業コードがあります。これはhtmlとcssで動作し、質問者が自分のコードに基づいてどのようにしているかを示します。 https://www.w3schools.com/howto/howto_js_slideshow.asp

var slideIndex = 1; 
var timer = null; 
showSlides(slideIndex); 

function plusSlides(n) { 
    clearTimeout(timer); 
    showSlides(slideIndex += n); 
} 

function currentSlide(n) { 
    clearTimeout(timer); 
    showSlides(slideIndex = n); 
} 

function showSlides(n) { 
    var i; 
    var slides = document.getElementsByClassName("mySlides"); 
    var dots = document.getElementsByClassName("dot"); 
    if (n==undefined){n = ++slideIndex} 
    if (n > slides.length) {slideIndex = 1} 
    if (n < 1) {slideIndex = slides.length} 
    for (i = 0; i < slides.length; i++) { 
     slides[i].style.display = "none"; 
    } 
    for (i = 0; i < dots.length; i++) { 
     dots[i].className = dots[i].className.replace(" active", ""); 
    } 
    slides[slideIndex-1].style.display = "block"; 
    dots[slideIndex-1].className += " active"; 
    timer = setTimeout(showSlides, 5000); 
}

出典

2017-08-08 14:41:59

自動と手動のスライドショー

答えて

関連する問題