Beispiel für die Verwendung von JS zur nativen Implementierung des Jahreskarussell-Auswahleffekts
VorwortVerwenden Sie js, um einen Jahresrotationsauswahleffekt zu erzielen. Schauen wir uns ohne weitere Umschweife die Bilder an:
1. Was ist die Idee?
2. Alle Codes1. html Der Code lautet wie folgt: <!DOCTYPE html> <html lang="de"> <Kopf> <meta charset="UTF-8"> <title>Titel</title> <link rel="stylesheet" href="index.css" rel="externes Nofollow" type="text/css"/> <script type="text/javascript" src="echarts.min.js"></script> <script type="text/javascript" src="index.js"></script> </Kopf> <Text> <div Klasse="Container"> <div id="left" class="arrow_left" onclick="clickBefore()" style="cursor:default" unselectable="on" onselectstart="return false;"> <span><</span> </div> <div id="wrap" Klasse="wrap"> <span onclick="ausgewählt(dies)">1</span> <span onclick="ausgewählt(dieses)">2</span> <span onclick="ausgewählt(dieses)">3</span> <span onclick="ausgewählt(dieses)">4</span> <span onclick="selected(this)">5</span> </div> <div id="rechts" class="arrow_right arrow_active" onclick="clickNext()" style="cursor:default" unselectable="an" onselectstart="return false;"> <span>></span> </div> </div> <div Klasse="Inhalt" ID="Inhalt"> </div> </body> </html> 2.js Der Code lautet wie folgt:
fenster.onload = Funktion () {
//Erste Renderliste initList(firstIndex);
};
lass yearArr = [2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021];
JahrAnf.reverse();
//Startindex let firstIndex = 0;
//Ausgewählter Index, der erste ist standardmäßig ausgewählt let selectedIndex = 0;
/**
* Initialisierungsliste */
Funktion initList(ersterIndex) {
//Seite rendern, Span-Liste let spanList = document.getElementById('wrap').getElementsByTagName('span');
für (lass i = 0; i < spanList.length; i++) {
let index = ersterIndex + i;
sei span = spanList[i];
span.innerText = JahrAnfang[index];
//Zum Hinzufügen und Entfernen den Stil auswählen if (index === selectedIndex) {
span.classList.add('aktiv');
} anders {
span.classList.remove('aktiv')
}
}
//Anzeigewert des Seiteninhalts document.getElementById('content').innerText = 'Derzeit ausgewähltes Jahr:' + yearArr[selectedIndex];
}
/**
* Nächste Seite */
Funktion klicke auf Weiter(div) {
wenn (ersterIndex + 5 < yearArr.length) {
ersterIndex = ersterIndex + 1;
initList(ersterIndex)
}
PfeilAktiv();
}
/*
* Vorherige Seite */
Funktion KlickVorher(div) {
if (ersterIndex > 0) {
ersterIndex = ersterIndex - 1;
initList(ersterIndex)
}
PfeilAktiv();
}
/**
* Wählen */
Funktion ausgewählt(Spanne) {
lass Wert = span.innerText;
let index = yearArr.findIndex((el) => {
return el + "" === Wert;
})
ausgewählterIndex = Index !== -1 ? Index: 0;
initList(ersterIndex);
}
/**
* Pfeile links und rechts aktiviert * firstIndex = 0: rechts aktiviert, links nicht * firstIndex = length-5: links aktiviert, rechts nicht * Andere: alle aktiviert */
Funktion arrowActive() {
lass links = document.getElementById('links')
rechts lassen = document.getElementById('rechts')
left.classList.add('Pfeil_aktiv');
right.classList.add('Pfeil_aktiv');
wenn (ersterIndex === 0) {
links.classList.remove('Pfeil_aktiv');
} sonst wenn (ersterIndex === yearArr.length - 5) {
rechts.classList.remove('Pfeil_aktiv');
}
}
2.css Der Code lautet wie folgt:
Körper{
Rand oben: 80px;
}
.container {
Anzeige: Flex;
Inhalt ausrichten: zentriert;
Elemente ausrichten: zentrieren;
Rand: 10px;
}
.wickeln {
Höhe: 40px;
Z-Index: 1;
Farbe: Schwarz;
Anzeige: Flex;
biegen: 1;
Hintergrund: rgba(155,226,219,0,5);
Rahmenradius: 20px;
Rand links: 20px;
Rand rechts: 20px;
}
.wrap span {
biegen: 1;
Textausrichtung: zentriert;
Höhe: 40px;
Zeilenhöhe: 40px;
Rahmenradius: 20px;
}
.aktiv{
Hintergrund: #1abc9c;
Farbe: #fff;
}
.Pfeil_links {
links: 10px;
Farbe: grün;
Polsterung: 0px 14px;
Randradius: 50 %;
Schriftgröße: 30px;
Z-Index: 2;
}
.Pfeil_rechts {
rechts: 10px;
Farbe: grün;
Polsterung: 0px 14px;
Randradius: 50 %;
Schriftgröße: 30px;
Z-Index: 2;
}
.Pfeil_aktiv{
Farbe: blau;
}
.Inhalt{
Rand links: 30px;
}
ZusammenfassenNehmen Sie jeden Tag ein bisschen auf und wachsen Sie vom Anfänger zum Neuling! ! ! Dies ist das Ende dieses Artikels über die native Verwendung von JS zur Implementierung des Jahreskarussell-Auswahleffekts. Weitere relevante Inhalte zur nativen JS-Implementierung des Jahreskarussell-Auswahlinhalts finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! Das könnte Sie auch interessieren:
|
<<: Eine kurze Einführung in Vue-Filter, Lebenszyklusfunktionen und Vue-Ressourcen
>>: So implementieren Sie Vue Page Jump
Artikel empfehlen
So erstellen Sie Ihre erste React-Seite
Inhaltsverzeichnis Was ist Rract? Hintergrund Rea...
Das neueste, äußerst detaillierte grafische Tutorial zum Herunterladen und Installieren virtueller VMware-Maschinen
Inhaltsverzeichnis 1. Laden Sie die virtuelle Mas...
JavaScript-Interview: So implementieren Sie die Methode zur Array-Abflachung
Inhaltsverzeichnis 1. Was ist Array-Flattening? 2...
Zusammenfassung der Wissenspunkte des Datenbankindex
Inhaltsverzeichnis Erster Blick-Index Das Konzept...
Vier Möglichkeiten, CSS und HTML zu kombinieren
(1) Jedes HTML-Tag hat ein Attribut style, das CS...
Zwei Möglichkeiten, damit IE6 Bilder im PNG-24-Format normal anzeigt
Methode 1: Bitte fügen Sie den folgenden Code nach...
CentOS 7: Beispielcode zum Festlegen des Grub-Passworts und zur Einzelbenutzeranmeldung
Es gibt erhebliche Unterschiede zwischen CentOS7 ...
So richten Sie Textfelder in mehreren Formularen in HTML aus
Der Formularcode ist wie in der Abbildung dargest...
Vue implementiert das Hoch- und Herunterladen von Dateien
In diesem Artikelbeispiel wird der spezifische Co...
So ersetzen Sie alle Tags im HTML-Text
(?i) bedeutet, dass die Groß-/Kleinschreibung nich...
JavaScript implementiert eine Eingabefeldkomponente
In diesem Artikelbeispiel wird der spezifische Co...
CocosCreator - modulares Lernskript
Modulares Cocos Creator-Skript Mit Cocos Creator ...
Lernen Sie die Grundlagen von nginx
Inhaltsverzeichnis 1. Was ist nginx? 2. Was kann ...
Tutorial zur grafischen Installation der MySQL 8.0.15 WinX64-Dekomprimierungsversion
Jedes Mal, wenn ich das System installiert habe, ...
Vue implementiert eine gleitende Navigation oben links und rechts
Navigation und andere Dinge werden bei der täglic...