show hide divs mit der Schaltfläche Next Previous mit jQuery?

7

für zB ich habe 10 <div> , ich möchte jedes <div> beim nächsten Knopf click & amp anzeigen; show previous <div> beim vorherigen Klick auf die Schaltfläche. wie man es mit jQuery macht?

    
Jay 12.06.2013, 11:34
quelle

4 Antworten

13
%Vor%

Dies ist ein sehr einfaches HTML-Beispiel.

Mit einem einfachen jQuery-Code wie diesem:

%Vor%

Für weitere Erklärungen: Der erste Block wird jedes Div außer dem ersten verstecken (e ist ein Zähler in jeder Funktion von jQuery).

Die zwei anderen Blöcke behandeln den Klick auf die Schaltflächen. Wir suchen nach dem sichtbaren div und beim Klick werden wir als nächstes angezeigt (siehe next () - Funktion von jquery oder div (prev () - Funktion von jquery).

Wenn es kein nächstes div gibt (beim nächsten Klick auf die Schaltfläche), verstecken wir das sichtbare div und zeigen das erste an.

Online-Beispiel hier: Ссылка

    
Louis XIV 12.06.2013, 12:47
quelle
4

Du kannst es so machen:

HTML:

%Vor%

JS:

%Vor%

jsfiddle

    
Stano 12.06.2013 13:49
quelle
1

probiere etwas aus, wenn du es selbst machen willst. Legen Sie alle divs fest, die angezeigt werden sollen: keine, außer dem ersten. Ändern Sie auch in unten Code Maxdiv Wert basierend auf der Anzahl der Divs Sie haben (oder finden Sie es in jquery selbst, wenn die Zahl ändern kann).

%Vor%     
Nitin Agrawal 12.06.2013 12:27
quelle
1

Es klingt wie ein Karussell, was Sie wollen

Hier sind einige Beispiele: Ссылка

Sie können eine nächste und vorherige Schaltfläche verwenden, um in ein div zu gleiten, und die alte Folie (oder einen anderen Effekt) zu gleiten

Die Karussells sind nicht abhängig von Bildern, es können Divs mit Inhalt gefüllt werden.

Viel Glück & amp; Einen schönen Tag noch!

edit: Bootstraps eigenes Karussell: Ссылка

    
Matthias Wegtun 12.06.2013 11:38
quelle

Tags und Links