Ich versuche, ein sehr, sehr einfaches Bild Slider / Slideshow ohne Autoplay bitte zu machen. Ich möchte nur zum nächsten oder vorherigen Bild beim Klick gehen. Einige Probleme haben, wie Sie unten lesen können.
Hier ist die jsFiddle Ссылка (ich habe gerade Hintergrundfarben anstelle von Bildern in der Geige als verwendet gut als switched img zu divs, aber es ist natürlich genau das gleiche Problem)
Der HTML-Code:
%Vor%Das CSS:
%Vor%jQuery für die nächste Schaltfläche:
%Vor%Die obige jQuery funktioniert einwandfrei, außer dass das erste Bild übersprungen wird, wenn ein Benutzer auf die nächste Schaltfläche auf der letzten Folie klickt. Es zeigt nur einmal das erste Bild an, alle anderen Bilder werden bei jedem nächsten Klick weiter verschoben. Aus irgendeinem Grund Anzeige: Keine wird zum ersten Bild hinzugefügt, aber ich weiß nicht, wo der Code herkommt.
jQuery für vorherige Schaltfläche:
%Vor%Dieser obige jQuery-Code gibt das gerade angezeigte Bild wie gewünscht zurück. Aber wenn man erneut klickt, tut es nichts.
Ich habe auch .prev () anstelle von .next () versucht. Es funktioniert gut, wenn Sie zum ersten Mal auf die vorherige Schaltfläche klicken. Angenommen, wir sehen Bild # 4 an. Wenn ich auf den vorherigen Button klicke, geht es zu Bild # 3, wie es sollte. Aber wenn man es erneut anklickt, geht es nicht zu Bild Nr. 2, es geht zurück zu Bild Nr. 4 und dann zu Nr. 3 und dann zu Nr. 4, wobei es sich wiederholt.
Nachdem ich Ihren Kommentar zu meiner vorherigen Antwort gelesen hatte, dachte ich, ich könnte dies als separate Antwort aufführen.
Obwohl ich Ihre Herangehensweise, es manuell zu tun, um jQuery besser zu verstehen, zu schätzen weiß, betone ich immer noch die Vorzüge der Verwendung bestehender Frameworks.
Das heißt, hier ist eine Lösung. Ich habe einige Ihrer CSS und HTML geändert, nur um es mir leichter zu machen mit
zu arbeitenDies ist die jQuery
%Vor% Also jetzt die Erklärung.
Stufe 1
1) Laden Sie das Skript auf Dokument bereit.
2) Ergreifen Sie die erste Folie und fügen Sie eine Klasse 'aktiv' hinzu, damit wir wissen, mit welcher Folie wir es zu tun haben.
3) Blenden Sie alle Folien aus und zeigen Sie die aktive Folie an. Jetzt ist Folie 1 der Anzeigeblock und der Rest wird angezeigt: none;
Stufe 2
Arbeiten mit dem Button-Weiter-Klick-Event.
1) Entferne die aktuelle aktive Klasse von der Folie, die verschwinden wird, und gib ihr die Klasse oldActive, damit wir wissen, dass sie auf dem Weg ist.
2) Weiter ist eine if-Anweisung, um zu überprüfen, ob wir uns am Ende der Diashow befinden und zum Anfang zurückkehren müssen. Es prüft, ob oldActive (d. H. Die ausgehende Folie) das letzte Kind ist. Wenn ja, dann gehe zurück zum ersten Kind und mache es 'aktiv'. Wenn es nicht das letzte Kind ist, dann greifen Sie einfach das nächste Element (mit .next ()) und geben Sie die Klasse aktiv.
3) Wir entfernen die Klasse oldActive, weil sie nicht mehr benötigt wird.
4) fadeOut alle Folien
5) Blenden Sie die aktiven Folien
einSchritt 3
Wie in Schritt zwei, jedoch mit umgekehrter Logik, um die Elemente rückwärts durchlaufen zu können.
Es ist wichtig zu beachten, dass es Tausende von Möglichkeiten gibt, wie Sie dies erreichen können. Dies ist nur meine Meinung über die Situation.
Warum versuchen Sie das Rad neu zu erfinden? Es gibt leichtere jQuery Slideshow-Lösungen da draußen, dann könnte man einen Stift anstecken, und jemand hat bereits die harte Arbeit für Sie getan und über Probleme nachgedacht, die Sie möglicherweise (browserübergreifende Kompatibilität etc) kennen.
jQuery Cycle ist eine meiner Lieblingsbibliotheken für das leichte Gewicht.
Was Sie erreichen möchten, könnte nur in
erledigt werden %Vor%Sehr einfacher Code, um jquery Slider zu machen Hier ist zwei div erstens der Slider-Viewer und zweitens ist der Bildlistencontainer. Kopieren Sie einfach den Code und passen Sie ihn mit css an.
%Vor%