Heim > Web-Frontend > js-Tutorial > Native js implementiert eine Umblätterfunktion, die Seiten nach oben und unten umblättern kann (Code)

Native js implementiert eine Umblätterfunktion, die Seiten nach oben und unten umblättern kann (Code)

不言
Freigeben: 2018-08-15 16:13:43
Original
6596 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit der nativen js-Implementierung der Seitenumblätterfunktion (Code), die einen gewissen Referenzwert hat Du. .

Die Umblätterfunktion wird häufig beim Rendern von Daten verwendet. Das Folgende ist eine Umblätterfunktion, die mit nativem JS implementiert wird, mit der Auf- und Ab-Umblätterfunktion. Das Rendern erfolgt wie folgt:

Hauptschritte/Ideen:

  1. Seiteneffekte erzielen;

  2. Wenn Sie auf die Seitenzahl klicken, Beurteilen Sie je nach Situation und kontrollieren Sie die Seitenwechsel. Es gibt die folgenden Situationen:

(a) Seitenzahl begrenzen => Es gibt 10 Seiten , und es werden jeweils nur 5 Seiten angezeigt

(a). Gesamtzahl der Seiten =Begrenzte Anzahl von Seiten =》Es wird nur 1 Seite zurückgegeben und es werden jeweils nur 5 Seiten gleichzeitig angezeigt

(a).Gesamtanzahl der Seiten

3. Die Funktion zum Umblättern von Seiten nach oben und unten, Je nach Umblättersituation sollte die Umblätterfunktion auf der ersten und letzten Seite entfernt werden

Umblättereffekt

<div class="pagination">
    <a href="javascript:;"  class="page-pre">上一页</a>
    <ul></ul>
    <a href="javascript:;" class="page-next">下一页</a>
</div>
Nach dem Login kopieren

Verwandte Empfehlungen:

So implementieren Sie die Umblätterfunktion in nativem JS

js Drag & Drop Implementierungscode zum Umblättern von Seiten_Javascript-Kenntnisse

JS zum Implementieren der Tastatursteuerung für Webseiten So blättern Sie Seiten_Javascript-Kenntnisse

Das obige ist der detaillierte Inhalt vonNative js implementiert eine Umblätterfunktion, die Seiten nach oben und unten umblättern kann (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage