Wie füge ich mit jQuery die nächste und die vorherige Schaltfläche zu meiner Diashow hinzu?

Ich habe eine Diashow, die automatisch mit einem Timer zum nächsten Bild übergeht, aber ich möchte mehr Funktionalität durch Pause hinzufügen und auch in der Lage sein, zum nächsten oder vorherigen Bild zu gehen. Ich bin jedoch verwirrt darüber, wie diese Ereignishandler hinzugefügt werden?Wie füge ich mit jQuery die nächste und die vorherige Schaltfläche zu meiner Diashow hinzu?

$(document).ready(function() { 
 
\t var nextSlide = $("#slides img:first-child"); 
 
\t var nextCaption; 
 
\t var nextSlideSource; 
 
\t \t 
 
\t // the function for running the slide show 
 
    var runSlideShow = function() { 
 
     \t $("#caption").fadeOut(1000); 
 
     \t $("#slide").fadeOut(1000, 
 
     \t \t function() { 
 
     \t  \t if (nextSlide.next().length == 0) { 
 
\t \t \t \t \t nextSlide = $("#slides img:first-child"); 
 
\t \t \t \t } 
 
\t \t \t \t else { 
 
\t \t \t \t \t nextSlide = nextSlide.next(); 
 
\t \t \t \t } 
 
\t \t \t \t nextSlideSource = nextSlide.attr("src"); 
 
\t \t \t \t nextCaption = nextSlide.attr("alt"); 
 
\t \t \t \t $("#slide").attr("src", nextSlideSource).fadeIn(1000); \t \t \t \t \t 
 
\t \t \t \t $("#caption").text(nextCaption).fadeIn(1000); 
 
\t \t \t } 
 
\t \t) 
 
\t } 
 
\t 
 
\t // start the slide show 
 
\t var timer = setInterval(runSlideShow, 3000); 
 
\t 
 
})

body { 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    width: 380px; 
 
    margin: 0 auto; 
 
    padding: 20px; 
 
    border: 3px solid blue; 
 
} 
 
h1, h2, ul, p { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 
h1 { 
 
\t padding-bottom: .25em; 
 
\t color: blue; 
 
} 
 
h2 { 
 
\t font-size: 120%; 
 
\t padding: .5em 0; 
 
} 
 
img { 
 
\t height: 250px; 
 
} 
 
#slides img { 
 
\t display: none; 
 
} 
 
#buttons { 
 
\t margin-top: .5em; 
 
\t text-align: center; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="UTF-8"> 
 
    <title>Xochitl Menjivar</title> 
 
    <link rel="stylesheet" href="main.css"> 
 
\t <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
 
    <script src="slide_show.js"></script> 
 
</head> 
 

 
<body> 
 
<main> 
 
    <h1>Fishing Slide Show</h1> 
 
    <h2 id="caption">Casting on the Upper Kings</h2> 
 
    <img id="slide" src="images/casting1.jpg" alt=""> 
 
    <div id="slides"> 
 
     <img src="images/casting1.jpg" alt="Casting on the Upper Kings"> 
 
     <img src="images/casting2.jpg" alt="Casting on the Lower Kings"> 
 
     <img src="images/catchrelease.jpg" alt="Catch and Release on the Big Horn"> 
 
     <img src="images/fish.jpg" alt="Catching on the South Fork"> 
 
     <img src="images/lures.jpg" alt="The Lures for Catching"> 
 
    </div> 
 
    <div id="buttons"> 
 
    \t <input type="button" id="prev" value="Previous" disabled> 
 
    \t <input type="button" id="play" value="Pause"> 
 
    \t <input type="button" id="next" value="Next" disabled>  \t 
 
    </div> 
 
</main> 
 
</body> 
 
</html>

Quelle

2017-04-15 Anonymous

Arbeits fiddle

Für Wiedergabe/Pause, dies zu tun

$('#play').on('click', function(e){ 
    e.preventDefault(); 
    isPaused = !isPaused; 

    if(isPaused){ 
     $('#play').val('Play'); 
     window.clearInterval(timer); 
    } else { 
     $('#play').val('Pause'); 
     timer = setInterval(runSlideShow, 3000) 
    } 
})

Variable deklarieren Wiedergabe/Pause-Zustand für die Verfolgung. Wenn es im Pausenzustand ist, löschen Sie das timer Intervall, wenn der Status abgespielt wird, und setzen Sie das Intervall timer erneut.

Auch Sie dieses Flag im Inneren könnte runSlideShow() Funktion hinzugefügt

var runSlideShow = function() { 
    if(!isPaused){ 
     $("#caption").fadeOut(1000); 
     $("#slide").fadeOut(1000, 
      function() { 
       findNextSlide() 
       nextSlideSource = nextSlide.attr("src"); 
       nextCaption = nextSlide.attr("alt"); 
       $("#slide").attr("src", nextSlideSource).fadeIn(1000);     
       $("#caption").text(nextCaption).fadeIn(1000); 
      } 
     ) 
    } 
}

Und Ereignis klicken Sie würde ziemlich kurz sein.

$('#play').on('click', function(e){ 
    e.preventDefault(); 
    isPaused = !isPaused; 
})

Für nächste Folie eine Option würde nur einfach klar sein, und starten Sie runSlideShow, die neue Folie automatisch mit allen Effekten zwingt zu holen.

Zeigen Sie die vorherige Folie, Sie können dieselbe Logik verwenden und stattdessen die nächste Folie suchen, suchen Sie einfach nach der vorherigen Folie. jQuery hat Funktion .prev() die .next()

bearbeiten Gegenteil von dem ist.

function findPreviousSlide(){ 
    if (nextSlide.prev().length == 0) { 
     nextSlide = $("#slides img:last-child"); 
    } 
    else { 
     nextSlide = nextSlide.prev(); 
    } 
}

Quelle

2017-04-15 13:02:36

Also für die vorherige Taste muss ich tun, so etwas wie $ ("# slide") zurück(); die vorherige Folie abrufen? Ich bin noch neu bei jQuery, daher bin ich mir immer noch nicht sicher, wie ich all diese Methoden anwenden soll. –

Das stimmt. Versuche paar Minuten pro Tag zu finden, um jQuery API zu besuchen und schau dir die Beispiele an;) –

Wie füge ich mit jQuery die nächste und die vorherige Schaltfläche zu meiner Diashow hinzu?

Antwort

Verwandte Themen