Bild Karussells, Bildschieber, egal warum Sie sie anrufen, dieser Modus ist im Internet so sichtbar, dass fast jede Website eine hat. Wenn Sie ein Webentwickler sind, k?nnen Sie selbst eine selbst bauen. Lassen Sie uns vor diesem Hintergrund sehen, wie Sie einen einfachen Bildschieberegler mit HTML, CSS und JQuery erstellen.

HTML -Struktur

Erstens erstellen wir ein Containerelement, das den Klassennamen container enth?lt. Der Beh?lter enth?lt unsere Bilder. Das Bild ist mit div -Tags umwickelt, so dass die Diashow in einen Link konvertiert werden kann oder ein anderes Inhalt als das Bild als Diashow verwendet werden kann. Der erste Container div verfügt über einige Inline -Stile, um sicherzustellen, dass das erste Bild im Schieberegler beim Laden der Seite sichtbar ist. Es gibt auch zwei Tastenelemente für manuelles Schleifen durch Diashows basierend auf Benutzeranfragen.

CSS -Stil

Hier setzen wir den Bild -Schieberegler, den Container div und die Breite ihrer internen Bilder. Es ist zu beachten, dass alle unsere Container div auf display: none; gesetzt sind. Wenn dies nicht der Fall ist, sind alle unsere Bilder gleichzeitig sichtbar. Wir werden JavaScript verwenden, um einen Container div festzulegen, und der Rest bleibt versteckt. display: inline-block;

JavaScript -Interaktion

, die auf 0 gesetzt ist. Die zweite Variable ist currentIndex, die auf items gesetzt ist. Dadurch wird eine Liste von Containern zurückgegeben, die Bilder enthalten. Die dritte Variable ist $('.container div'), die auf die L?nge der Variablen eingestellt ist. Die letzte Variable zeigt uns die Gesamtzahl der Folien im Bildschieberegler an. div itemAmt Als n?chstes erstellen wir eine Funktion namens "CycleItems". Diese Funktion wird verwendet, um das richtige Bild anzuzeigen und gleichzeitig sicherzustellen, dass andere Bilder verborgen bleiben. In dieser Funktion erstellen wir eine Variable namens items. Diese Variable wird auf

-Methode nimmt eine Ganzzahl und findet das erste von item zurückgegebene Element, das mit der Ganzzahl übereinstimmt. Wenn $('.container div').eq(currentIndex) 0 ist, wird eq auf den ersten Bildbeh?lter im Bildschieberegler positioniert. In unserer $('.container div') -Funktion verstecken Sie alle unsere Bildbeh?lter currentIndex und setzen Sie $('.container div').eq(currentIndex) auf cycleItems. div

Um sicherzustellen, dass sich unser Bild automatisch dreht, müssen wir eine M?glichkeit bieten, unsere cycleItems -Funktion kontinuierlich aufzurufen, nachdem ein bestimmter Zeitraum vergangen ist. Wir tun dies, indem wir eine andere Variable namens autoSlide erstellen. Diese Variable speichert eine setInterval -Funktion, die eine Verz?gerung von 3000 Millisekunden oder drei Sekunden lang erfordert. In dieser Funktion fügen wir der currentIndex -Variablen 1 hinzu, sodass $('.container div').eq(currentIndex) immer auf den n?chsten Container div verweist. Dann definieren wir eine sehr wichtige "wenn" -serkl?rung. Diese Aussage bedeutet, dass, wenn unsere currentIndex -Variable gr??er ist als die Gesamtzahl der Bilder im Schieberegler, die Variable auf Null zurückgesetzt wird. Wenn wir dies nicht haben, k?nnen wir unsere Bildliste nicht durchlaufen. Nach der IF -Anweisung nennen wir die cycleItems -Funktion.

Als n?chstes definieren wir die vorherigen und n?chsten Operationen. Diese definieren, was passiert, wenn wir auf die vorherigen und n?chsten Schaltfl?chen klicken. Sie funktionieren ?hnlich wie die autoSlide -Funktion, au?er dass sie die automatische Schleife beim Klicken abbrechen. Um die Diashow manuell zu durchschleifen, wird die Taste currentIndex auf die Schaltfl?che "Auf der n?chste Schaltfl?che" hinzugefügt. Durch Klicken auf die vorherige Schaltfl?che wird die currentIndex -Revariable um 1 reduziert.

Demo

Zeigen Sie die Demo auf CodePen

zus?tzliches Inhalt

Um den Bild -Schieberegler anzuzeigen, der nur mit CSS und HTML erstellt wurde, lesen Sie die Demo von Zack Wallace! (Der Link sollte hier eingefügt werden, und Sie k?nnen bei Bedarf einen Link angeben)

FAQ (FAQ)

(Dies kann nach dem ursprünglichen FAQ -Teil umgeschrieben und poliert werden, so dass der Sprachausdruck natürlicher und glatt ist, w?hrend die Konsistenz des Inhalts beibeh?lt)

Durch die obigen Schritte k?nnen Sie einen einfachen Bildschieberegler erstellen. Denken Sie daran, dass Sie Ihren CSS -Stil und Ihren JavaScript -Code an Ihre Anforderungen an unterschiedliche Effekte anpassen k?nnen.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen einfachen Image -Schieberegler mit HTML, CSS und JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!