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
Implementierung der Vue-Paketgrößenoptimierung (von 1,72 M auf 94 K)
1. Hintergrund Ich habe vor Kurzem eine Website n...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.17
Dieser Artikel enthält das grafische Tutorial zur...
Eine kurze Einführung in Protobuf und ein Installationstutorial in der Ubuntu 16.04-Umgebung
Eine kurze Einführung in protobuf Protobuf ist Go...
Detaillierte Erklärung des SELINUX-Arbeitsprinzips
1. Einleitung Der Hauptvorteil, den SELinux für L...
Verwenden Sie Element+vue, um Start- und Endzeitlimits zu implementieren
In diesem Artikelbeispiel wird der spezifische Co...
So erstellen Sie Ihren eigenen privaten Nexus-Server unter Linux
Dieser Artikel beschreibt, wie man über Docker ei...
Aufzeichnungen zur Verwendung von SSH-Befehlen unter Windows 8
1. Öffnen Sie die virtuelle Maschine und das Git-...
Eine kurze Diskussion über Flex-Layout und Skalierungsberechnung
1. Einführung in Flex Layout Flex ist die Abkürzu...
VirtualBox CentOS7.7.1908 Python3.8 Build Scrapy-Entwicklungsumgebung [grafisches Tutorial]
Inhaltsverzeichnis Umfeld Installieren Sie CentOS...
Detaillierter Installationsprozess von MySQL5.6.40 unter CentOS7 64
MySQL5.6.40-Installationsprozess unter CentOS7 64...
Verwenden von Iframe-Techniken, um Ideen und Beispielcode für die QQ-Implementierung von Besuchern zu erhalten
Heute hat mich bei der Arbeit ein Freund, den ich ...
Deaktivieren Sie die automatische Vervollständigung in HTML, damit der Verlauf nicht angezeigt wird
Das Eingabefeld zeigt beim Eingeben von Inhalten i...
So erstellen Sie PHP7 mit einem benutzerdefinierten Docker-Image
Führen Sie zunächst eine einfache Docker-Installa...
Tutorial zur binären Kompilierung und Installation von MySql centos7 unter Linux
// Ich habe einen ganzen Nachmittag für die Insta...
CSS World – Code-Praxis: Präsentation zu alternativen Bildinformationen
Wenn wir jedoch das Element <img> mit der S...