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.
<!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:
|
<<: Implementieren eines Einkaufswagens mit nativem JavaScript
Artikel empfehlen
Der Unterschied zwischen den Feldtypen char, varchar und Text in MySQL
In MySQL können alle Felder der Typen char, varch...
Installation und Konfiguration von MySQL 8.0.15 unter Centos7
In diesem Artikel finden Sie das grafische Tutori...
Verwendung des Fokus-innerhalb-Selektors von CSS3
Pseudoelemente und Pseudoklassen Apropos, schauen...
Detailliertes Tutorial zum Kompilieren und Installieren von Python3.6 unter Linux
1. Gehen Sie zunächst auf die offizielle Website ...
Detaillierte Erläuterung der Idee zur Implementierung dynamischer Spalten in AngularJS-Loop-Objekteigenschaften
AngularJS-Loop-Objekteigenschaften zum Erreichen ...
Detaillierter Code zur Implementierung einer 3D-Tag-Cloud in Vue
Vorschau: Code: Seitenabschnitte: <Vorlage>...
Beispielcode zur Implementierung eines reinen CSS-Popup-Menüs mit Transform
Vorwort Wenn Sie ein Topmenü erstellen, müssen Si...
So richten Sie eine automatische tägliche Datenbanksicherung in Linux ein
Dieser Artikel verwendet das Centos7.6-System und...
So lösen Sie das Problem zu vieler geöffneter Dateien in Linux
Die Ursache liegt darin, dass der Prozess zu eine...
Detaillierte Erklärung der in Node.js integrierten Module
Inhaltsverzeichnis Überblick 1. Pfadmodul 2. Bis ...
Beschreibung der Schreibmethode des Foreach-Arrays in Vue und des Traversal-Arrays in js
So schreiben Sie ein Vue-foreach-Array und durchl...
Detaillierte Erläuterung des Linux-Indexknoten-Inode
1. Einführung in Inode Um Inode zu verstehen, müs...
Grafisches Tutorial zur MySQL 5.7-Konfiguration ohne Installation
Mysql ist eine beliebte und einfach zu bedienende...
Beim Hinzufügen einer Windows 2008-Server-Subdomäne zu einer übergeordneten Domäne wird eine Fehlermeldung angezeigt: Die Domäne existiert bereits
Beim Hinzufügen einer Windows 2008-Server-Subdomä...
JavaScript zählt, wie oft ein Zeichen vorkommt
In diesem Artikelbeispiel wird der spezifische Ja...