JS-Code zum Erzielen eines Seitenwechseleffekts

JS-Code zum Erzielen eines Seitenwechseleffekts

In diesem Artikelbeispiel wird der spezifische Code des JS-Codes zur Erzielung eines Seitenwechseleffekts zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

HTML+CSS-Teil

Fügen Sie alle Seiten und Schaltflächen für die vorherige Seite, eine bestimmte Seite und die nächste Seite hinzu.
Legen Sie den Div-Stil fest. Standardmäßig wird die erste Seite angezeigt und die anderen Seiten sind ausgeblendet.

<!DOCTYPE html>
<html>
 <Kopf>
 <meta charset="UTF-8">
 <Titel></Titel>
 <Stil>
  .Artikel {
  Anzeige: keine;
  Breite: 300px;
  Höhe: 400px;
  Überlauf: versteckt;
  Position: relativ;
  }  
  .item>img {
  Breite: 100 %;
  Höhe: automatisch;
  Position: absolut;
  oben: 0;
  links: 0;
  rechts: 0;
  unten: 0;
  Rand: automatisch;
  } 
  .item.aktiv {
  Anzeige: Block;
  }
 </Stil>
 </Kopf>
 <Text>
 <div>
  <button class="prev" >Vorherige Seite</button>
  <button class="btn">1</button>
  <button class="btn">2</button>
  <button class="btn">3</button>
  <button class="btn">4</button>
  <button class="next" >Nächste Seite</button>
 </div>
 <div>
  <div Klasse="Element aktiv"><img src="img/1.png" Höhe="1191" Breite="820" /></div>
  <div Klasse="item"><img src="img/2.png" Höhe="1191" Breite="820" /></div>
  <div Klasse="item"><img src="img/3.png" Höhe="1191" Breite="820" /></div>
  <div Klasse="item"><img src="img/4.png" Höhe="1191" Breite="820" /></div>
 </div>
 </body>
</html>

js-Teil

Verwenden Sie Schaltflächen, um Seitenfunktionen zu implementieren

<Skripttyp="text/javascript">
 // Kapselungsfunktion, Teil der Bildanzeige, durch Übergabe des erhaltenen Div und der angeklickten Sequenznummernfunktion toggle(eles, active) {
  für(var i = eles.length; i--;) {
   eles[i].className = "item"; //Zuerst alle Divs ausblenden}
  eles[active].className = "item active"; //Dann zeige das div an, das der angeklickten Nummer entspricht}
  //Holen Sie sich den Button und das Div
  var aBtn = document.getElementsByClassName("btn");
  var aIem = document.getElementsByClassName("item");
  var prev = document.getElementsByClassName("prev");
  var nächstes = document.getElementsByClassName("nächstes");
  var nowPage = 0; //Definiere die aktuelle Seite, der Standardwert ist 0;
    
  für(var i = aBtn.length; i--;) {
   aBtn[i].tab = i;
   aBtn[i].onclick=Funktion(){
   Umschalten (aIem, diese.Registerkarte);
   nowPage=this.tab; //Nach dem Anklicken die Seriennummer der aktuellen Seite speichern}
  }
   //Nächste Seite next[0].onclick = function () {  
   jetztSeite++;   
   jetztSeite %= aBtn.Länge;
   umschalten(aIem,jetztSeite);
  }
  //Vorherige Seite prev[0].onclick=function(){
  jetztSeite--;
  wenn(jetztSeite == -1){
   jetztSeite = aBtn.Länge-1;
  }
 umschalten(aIem,jetztSeite);  
 }
</Skript>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Seitenwechselstil basierend auf JS, um einen Daumenkino-Effekt zu erzielen
  • Einfache Implementierung der JS-Seitenwechselfunktion
  • So implementieren Sie skalierbares Seitenwechseln mit AngularJS
  • JavaScript realisiert den Popup-Floating-Layer-Effekt, wenn die Maus über den Text bewegt wird
  • js-Text überschreitet die Länge und wird durch Auslassungspunkte ersetzt. Beim Bewegen der Maus wird ein Beispiel in einer schwebenden Box angezeigt.
  • Javascript Das Originalbild wird angezeigt, wenn die Maus über das Bild fährt, und verschwindet, wenn die Maus herausbewegt wird (mehrere Bilder)
  • Vue.js-Funktion zum Ändern von Bildern durch Mouseover
  • Der von js erzeugte Dropdown-Box-Effekt, wenn die Maus angehalten wird
  • So zeigen Sie eine Maskenebene an, wenn die Maus in js schwebt
  • JavaScript zum Erzielen eines Seitenwechseleffekts beim Mouseover

<<:  Implementieren eines Einkaufswagens mit nativem JavaScript

>>:  JavaScript Canvas-Textuhr

Artikel empfehlen

Beispiel zum Festlegen der pseudostatischen WordPress-Eigenschaft in Nginx

Zitat aus Baidus Erklärung zu Pseudostatik: Pseud...

So konvertieren Sie MySQL horizontal in vertikal und vertikal in horizontal

Daten initialisieren Tabelle löschen, wenn `test_...

Zusammenfassung häufiger Probleme mit MySQL-Indizes

F1: Welche Indizes hat die Datenbank? Was sind di...

Detaillierte Erläuterung häufiger Xshell-Probleme und zugehöriger Konfigurationen

Dieser Artikel stellt häufige Probleme von Xshell...

Verwenden von js zum Implementieren eines Zahlenratespiels

Letzte Woche gab mir der Lehrer eine kleine Hausa...

Vue CodeMirror realisiert den Effekt des Online-Code-Compilers

Vorwort Wenn wir den Effekt der Online-Codekompil...

Beispiel für die Verwendung von JSX zur Entwicklung einer Markup-Komponente (Front-End-Komponentenbildung)

Inhaltsverzeichnis Aufbau einer JSX-Umgebung NPM ...

Beispiel für CSS3 zum Erzielen eines Div-Ein- und Ausschiebens von unten nach oben

1. Zuerst müssen Sie den Zielselektor von CSS3 ve...

Vue setzt die Daten auf ihren ursprünglichen Zustand zurück

In einigen Fällen müssen die Daten in den Daten w...

Detaillierte Erläuterung der Wissenspunkte zur Linux-Remoteverwaltung und SSHD-Dienstüberprüfung

1. SSH-Remoteverwaltung SSH-Definition SSH (Secur...

Tutorial der MySQL-Reihe zum Verständnis der Verwendung der Schlüsselwörter „union“ (alles), „limit“ und „exists“

Inhaltsverzeichnis 1.union: Sie können Abfrageerg...

React implementiert den Beispielcode der Radiokomponente

Ziel dieses Artikels ist es, die Grundfunktionen ...

Beispiel für die Implementierung von Unterstreichungseffekten mit CSS und JS

In diesem Artikel werden hauptsächlich zwei Arten...

Lösung für das Problem von var in einer for-Schleife

Vorwort var ist eine Möglichkeit, Variablen in ES...

HTML-Code zum Hinzufügen von Symbolen zum transparenten Eingabefeld

Ich habe vor Kurzem eine Website mit Anwaltsempfe...