Heim >Web-Frontend >js-Tutorial >So erstellen Sie mit jquery ein Bilderkarussell

So erstellen Sie mit jquery ein Bilderkarussell

coldplay.xixi
coldplay.xixiOriginal
2020-11-24 12:11:213545Durchsuche

So verwenden Sie jquery, um ein Bildkarussell zu erstellen: Führen Sie zuerst die jquery-Skriptdatei ein, rufen Sie die lightSlider-Methode auf, indem Sie die ID des ul-Tags im js-Skript übergeben.

So erstellen Sie mit jquery ein Bilderkarussell

Die Betriebsumgebung dieses Tutorials: Windows7-System, jquery3.5.1-Version. Diese Methode ist für alle Computermarken geeignet.

So verwenden Sie JQuery zum Erstellen eines Bildkarussells:

1. Natürlich gibt es auch Plug-Ins für das Bildkarussell auf Baidu Plug-in-Code.

So erstellen Sie mit jquery ein Bilderkarussell

2. Dann das Bilderkarussell implementieren. Natürlich müssen wir zuerst die JQuery-Skriptdatei vorstellen.

So erstellen Sie mit jquery ein Bilderkarussell

3. Führen Sie dann die Skriptdatei von Lightslider ein, und die entsprechende Stildatei wird ebenfalls benötigt.

So erstellen Sie mit jquery ein Bilderkarussell

4. Der HTML-Teil ist sehr einfach, nur ein ul- oder li-Tag. Es ist zu beachten, dass das li-Tag ein data-thumb-Attribut enthält und der Attributwert der Pfad des Bildes ist.

So erstellen Sie mit jquery ein Bilderkarussell

5. Rufen Sie im js-Skript die lightSlider-Methode auf, indem Sie die ID des ul-Tags übergeben, um eine Instanz zu initialisieren. Die darin enthaltenen Parameter entnehmen Sie bitte der Dokumentation.

So erstellen Sie mit jquery ein Bilderkarussell

6. Führen Sie die Seite aus und wir können ein wunderschönes Bilderkarussell-Plug-in sehen.

So erstellen Sie mit jquery ein Bilderkarussell

7. Wenn wir zusätzlich zur automatischen Wiedergabe auf ein Bild unten klicken, wird das Bild auch entsprechend im großen Bild angezeigt.

So erstellen Sie mit jquery ein Bilderkarussell

Verwandte kostenlose Lernempfehlungen: JavaScript(Video)

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit jquery ein Bilderkarussell. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn