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
Eine kurze Diskussion zur Front-End-Produktion: Ist IE6 aus Kompatibilitätsgründen noch erforderlich?
Auf dem heimischen Markt besteht noch immer ein g...
Detaillierte Erklärung der Unterschiede und Verwendungen von Linux-System-Shutdown-Befehlen
Was sind die Shutdown-Befehle für Linux-Systeme? ...
MySQL-Schleife fügt zig Millionen Daten ein
1. Erstellen Sie eine Testtabelle Tabelle `mysql_...
Detaillierte Erklärung der Verwendung und des Unterschieds zwischen relativ und absolut in HTML
Der Unterschied zwischen relativ und absolut in H...
MySQL verwendet Union, um die Daten zweier Tabellen zusammenzuführen und anzuzeigen
Verwenden des UNION-Operators Union : Wird verwen...
Gründe und Lösungen für die fehlende Remote-Verbindung zur MySQL-Datenbank unter CentOS7
Vorwort Ich bin kürzlich bei der Arbeit auf ein P...
MySQL-Sortierung mittels Index-Scan
Inhaltsverzeichnis Installieren Sie Sakila Index-...
Vues Leitfaden zu Fallstricken bei der Verwendung von Drosselungsfunktionen
Vorwort In einem üblichen Geschäftsszenario müsse...
So erstellen Sie Ihr eigenes Docker-Image und laden es auf Dockerhub hoch
1. Registrieren Sie zunächst Ihr eigenes Dockerhu...
CSS verwendet das Autoflow-Attribut, um einen Sitzauswahleffekt zu erzielen
1. Autoflow-Attribut: Wenn die Länge und Breite d...
Analyse des Ausschnitts des Hintergrundbildes des Neunerrasters mit adaptiver Breite und Höhe
<br />Basierend auf dem ursprünglichen, in B...
Wie funktionieren die dynamischen Komponenten von Vue3?
Inhaltsverzeichnis 1. Komponentenregistrierung 1....
So erzwingen Sie die vertikale Anzeige auf mobilen Seiten
Ich habe kürzlich bei der Arbeit eine mobile Seit...
Problemanalyse der Verwendung einer Idee zum Erstellen eines Springboot-Initialisiererservers
Problembeschreibung Als ich kürzlich ein Springbo...
PNG-Alpha-Transparenz in IE6 (vollständige Sammlung)
Viele Leute sagen, dass IE6 PNG-Transparenz nicht...