Automatische und manuelle Diashow

Ich muss eine Diashow machen, die sowohl automatisch als auch manuell arbeiten muss.Automatische und manuelle Diashow

Für den manuellen Teil habe ich zwei Tasten: nächste und vorherige, die mir erlaubt, die Fotos zu sehen, ohne eine bestimmte Zeit zwischen den Bildern zu warten.

Wenn ich nicht auf die Tasten klicke, wird die Diashow automatisch und die Bilder ändern sich nach sechs Sekunden (zum Beispiel).

Mein Problem ist, dass, nachdem ich auf den vorherigen/nächsten Knopf geklickt habe, die Bilder schneller erscheinen oder mehr als eine auf dem Bildschirm erscheinen. Hier

ist der Code, mit denen ich arbeite:

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>

Gibt es eine Weise, die ich die Diashow Rückkehr in seine „Geschwindigkeit“ machen kann zeigen die Bilder alle sechs Sekunden, nachdem ich klick auf vorheriges/nächstes?

Wie kann ich verhindern, dass mehr als ein Bild gleichzeitig angezeigt wird?

Quelle

2016-11-16 user7167081

Nur eine kleine Anmerkung: Sie können 'verwenden, wenn {...}' statt 'if (n undefiniert ===) {...}' (n!). Es ist kürzer und lesbarer. –

@CommercialSuicide, würde ich nicht empfehlen - vor allem bei der Arbeit mit Zahlen oder irgendeine Art von Typ, der einen Wert haben könnte, der falsch ist (z. B. 0, ''), wie '! 0 === wahr'. – JanS

@JanS, sicher, wenn jemand 'if (! N) {...}' Konstruktion verwenden will, muss er über ** Zwang ** und das Verhalten von Primitiven wissen –

In diesem Fall werden mehrere Timer gestartet, was dazu führt, dass die Callback-Funktion häufiger ausgeführt wird als erwartet.

Sie müssen sicherstellen, dass Sie die ganze Zahl erfassen, die von Ihrem Timer zurückgegeben:

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

... dann:

timer = setTimeout(showSlides, 6000);

Damit Sie den Timer beenden können gegebenenfalls :

clearTimeout(timer);

Sie werden Ihren Timer nach dem Klicken der BU löschen möchten tton, wodurch die automatische Ausführung gestoppt wird und Sie dann eine neue starten können, so dass Sie nur noch einen laufenden Timer haben.

Quelle

2016-11-16 17:54:42

Danke! :) Ich musste auch folgendes hinzufügen: 'für (i = 0; i user7167081

-1

Hier ist Code für eine automatische und manuelle Diashow mit dem Timer, wie von Scott vorgeschlagen. Es funktioniert mit dem html und css von diesem wie auf dem der Fragesteller seinen Code aufbaut. 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); 
}

Quelle

2017-08-08 14:41:59

Automatische und manuelle Diashow

Antwort

Verwandte Themen