Karusselleffekte mit JavaScript implementieren
|
In diesem Artikel wird der spezifische Code für JavaScript zur Erzielung des Karusselleffekts als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt
Implementierungscode:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
<Stil>
* {
Rand: 0;
Polsterung: 0;
}
ul {
Listenstil: keiner;
}
#Kasten {
Rand: 30px automatisch;
Breite: 590px;
Höhe: 340px;
Position: relativ;
}
#banner-list > li {
Position: absolut;
links: 0;
rechts: 0;
Deckkraft: 0;
/*Übergangsanimation*/
Übergang: Deckkraft 2 Sekunden;
}
#links rechts {
Breite: 30px;
Höhe: 60px;
Textausrichtung: zentriert;
Zeilenhöhe: 60px;
Schriftgröße: 24px;
Farbe: rgba(255,255,255,0,7);
Hintergrundfarbe: rgba(0,0,0,0,3);
Position: absolut;
oben: 50 %;
Rand oben: -30px;
Z-Index: 3;
}
#Rechts {
rechts: 0;
}
#Tag-Liste {
Breite: 130px;
Position: absolut;
links: 50%;
unten: 8px;
Rand links: -55px;
}
#tag-list > li {
schweben: links;
Breite: 18px;
Höhe: 18px;
Rand: 4px;
Textausrichtung: zentriert;
Zeilenhöhe: 18px;
Schriftgröße: 13px;
Hintergrundfarbe: weiß;
Rahmenradius: 9px;
/*Übergangsanimation*/
Übergang: Hintergrundfarbe, 1 Sekunde lang;
}
</Stil>
<Skript>
fenster.onload = Funktion (){
//Tag_Liste und Kreisliste abrufen
var tag_list = document.getElementById("tag-list");
var Liste = Tag_Liste.Kinder;
//1. Hol dir ul(banner_list) und alle li
let banner_list = document.getElementById("banner-list");
sei bannerLi = banner_list.children;
//2. Standardmäßig das erste Banner anzeigen
bannerLi[0].className = "aktuelles Banner"
bannerLi[0].style.opacity = 1
Liste[0].style.backgroundColor = "rot"
//3. Der Index beginnt bei 0 und standardmäßig wird der erste angezeigt.
//Anzahl gibt den Index der aktuell angezeigten Seite an. Let count = 0;
//4. Klicken Sie auf >, um nach rechts zu wechseln. var right = document.getElementById("right");
rechts.beiKlick = Funktion (){
//4.1 Blende das erste Banner der aktuellen Seite ausLi[count].className = ""
bannerLi[Anzahl].style.opacity = 0
Liste[Anzahl].Stil.Hintergrundfarbe = "weiß"
//4.2. Die Seitenzahl wird um 1 erhöht. Wenn die 6. Seite erreicht ist (Index = 5), wird zur ersten Seite gewechselt (Index = 0).
wenn (++Anzahl == 5){
Anzahl = 0
}
//4.3 Aktuelle Seitenzahl zum Anzeigen des Banners festlegenLi[Anzahl].className = "current-banner"
BannerLi[Anzahl].Stil.opacity = 1
Liste[Anzahl].Stil.Hintergrundfarbe = "rot"
}
//Ähnlich wie rechts, ändern Sie die Bedingung var left = document.getElementById("left");
links.beimKlick = Funktion (){
//4.1 Blende das erste Banner der aktuellen Seite ausLi[count].className = ""
bannerLi[Anzahl].style.opacity = 0
Liste[Anzahl].Stil.Hintergrundfarbe = "weiß"
//4.2. Die Seitenzahl wird um 1 verringert. Wenn die 0. Seite erreicht ist (Index = -1), wird zur 5. Seite gewechselt (Index = 4).
wenn (--count == -1){
Anzahl = 4
}
//4.3 Aktuelle Seitenzahl zum Anzeigen des Banners festlegenLi[Anzahl].className = "current-banner"
BannerLi[Anzahl].Stil.opacity = 1
Liste[Anzahl].Stil.Hintergrundfarbe = "rot"
}
//Mausereignisse an alle Kreise binden for (let i = 0; i < list.length; i++) {
Liste[i].onmouseenter = Funktion (){
//Kreisstil festlegen list[count].style.backgroundColor = "white"
Liste[i].style.backgroundColor = "rot"
//Den Stil des Bannerbilds festlegen bannerLi[count].className = ""
bannerLi[Anzahl].style.opacity = 0
bannerLi[i].className = "aktuelles Banner"
bannerLi[i].style.opacity = 1
//Setze die Anzahl auf i
Anzahl = i
}
}
}
</Skript>
</Kopf>
<Text>
<div id="box">
<ul id="Bannerliste">
<li class="current-banner"><img src="banner-img/11.jpg" alt=""></li>
<li><img src="banner-img/22.jpg" alt=""></li>
<li><img src="banner-img/33.jpg" alt=""></li>
<li><img src="banner-img/44.jpg" alt=""></li>
<li><img src="banner-img/55.jpg" alt=""></li>
</ul>
<span id="left"><</span>
<span id="right">></span>
<div>
<ul id="Tag-Liste">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
</body>
</html>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:
|
<<: mysql 8.0.19 winx64.zip Installations-Tutorial
>>: Remotedesktopverbindung zwischen Windows und Linux
Artikel empfehlen
Detaillierte Erklärung der Verwendung des SS-Befehls in Linux in Kombination mit Zabbix zum Überwachen von Sockets
Inhaltsverzeichnis Vorwort 1. SS-Befehl 2. Gesamt...
Docker-Compose erstellt schnell Schritte für ein privates Docker-Warehouse
Erstellen Sie docker-compose.yml und füllen Sie d...
Zusammenfassung der englischen Namen chinesischer Schriftarten
Wenn Sie in CSS die Eigenschaft „font-family“ ver...
Installieren Sie Docker auf Centos7 (neueste Version 2020 verfügbar, einfach kopieren und einfügen)
Informationen zur Bedienung finden Sie hier in de...
CSS-Stil zurücksetzen und löschen (damit verschiedene Browser den gleichen Effekt anzeigen)
Damit die Seitenanzeige in verschiedenen Browsern ...
Lösung für das Problem „VMware-virtuelle Maschine ohne Netzwerk“
Inhaltsverzeichnis 1. Problembeschreibung 2. Prob...
Zusammenfassung der neuen Verwendung von vi (vim) unter Linux
Ich benutze den vi-Editor seit mehreren Jahren, h...
So erstellen Sie ein responsives Säulendiagramm mit dem CSS-Rasterlayout
Ich spiele jetzt schon eine Weile mit Diagrammen ...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.17
Dieser Artikel enthält das grafische Tutorial zur...
Verwenden Sie Python, um mithilfe des Moduls pymysql eine Verbindung zur MySQL-Datenbank herzustellen
Installieren Sie pymysql pip install pymysql 2|0V...
Detaillierte Erklärung der Vue px-zu-rem-Konfiguration
Inhaltsverzeichnis Methode 1 1. Konfigurations- u...
K3s-Erste-Schritte-Handbuch - Detailliertes Tutorial zum Ausführen von K3s in Docker
Was ist k3d? k3d ist ein kleines Programm zum Aus...
Kompilieren Sie CPP-Dateien mit G++ in Ubuntu
Als ich die CPP-Datei zum ersten Mal mit G++ komp...
Json-String + Cookie + lokaler Speicher in JS
Inhaltsverzeichnis 1.JSON-Zeichenfolge 1.1Json-Sy...
Installation, Konfiguration und Deinstallation von MySQL 8.0 in einer Windows-Umgebung
Softwareversion Windows: Windows 10 MySQL: mysql-...