Beispiel für die Verwendung von JS zur nativen Implementierung des Jahreskarussell-Auswahleffekts

Beispiel für die Verwendung von JS zur nativen Implementierung des Jahreskarussell-Auswahleffekts

Vorwort

Verwenden Sie js, um einen Jahresrotationsauswahleffekt zu erzielen. Schauen wir uns ohne weitere Umschweife die Bilder an:

1. Was ist die Idee?

  • Layout: Die Pfeile nach links und rechts verwenden die Entitätszeichen < und > Jahr-5-Spannungen. Verwenden Sie zum horizontalen Anordnen das Flex-Layout.
  • js-Logik: (Hinweis: Die Jahresdaten sind ein Zahlenarray)
    • a> . Standardmäßig werden die Daten der ersten 5 Jahre angezeigt.
    • b>. firstIndex zeichnet den Startindex der 5 anzuzeigenden Jahre auf. Klicken Sie auf den rechten Pfeil +1, bis firstIndex+5 genau der Länge des Jahresarrays entspricht und nicht mehr zunimmt. Klicken Sie auf den linken Pfeil -1, bis der erste Index 0 ist und nicht mehr abnimmt. Der Anfangswert ist 0.
    • c>.selectedIndex zeichnet den Index des aktuell angeklickten und ausgewählten Jahres auf. Der erste Wert, 2021, wird standardmäßig angezeigt. Anfangswert: 0.
    • d>.firstIndex-Wertänderungen, holen Sie sich die Jahre, die firstIndex, firstIndex+1, firstIndex+2…firstIndex+4 entsprechen, und rendern Sie sie auf der Seite. Und einer dieser fünf Indizes ist gleich selectedIndex, was bedeutet, dass das ausgewählte Jahr zu den auf der aktuellen Seite angezeigten Jahren gehört. Daher fügt der Bereich, der demselben Index entspricht, den ausgewählten Stil hinzu und die anderen 4 Bereiche entfernen den ausgewählten Stil.
  • CSS: Logik für linke und rechte Pfeile, alle anklickbaren Stile werden standardmäßig hinzugefügt: firstIndex=0, links anklickbaren Stil entfernen, firstIndex+5=Jahresarraylänge, rechts anklickbaren Stil entfernen.

2. Alle Codes

1. 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>&lt;</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>&gt;</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;
}

Zusammenfassen

Nehmen 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:
  • Das Javascript-Dropdown-Listenfeld „Jahr“ enthält das aktuelle Jahr und die 50 Jahre davor und danach.
  • Einfache Bedienung des JS-Datumsobjekts (aktuelles Jahr, Woche, Uhrzeit abrufen)
  • Kompatibilität von Javascript Getyear in IE und Firefox
  • js-Ausgabe Mondkalender, Sonnenkalender, Jahr, Monat, Woche Beispielcode
  • Ein JS-Code, der das aktuelle Jahr und das Sternzeichen anzeigen kann
  • JS generiert dynamisch Beispielcode für Jahr und Monat

<<:  Eine kurze Einführung in Vue-Filter, Lebenszyklusfunktionen und Vue-Ressourcen

>>:  So implementieren Sie Vue Page Jump

Artikel empfehlen

Dropdown-Menü implementiert durch HTML+CSS3+JS

Ergebnisse erzielen html <div Klasse="Con...

So passen Sie die Protokollebene von Nginx in Docker an

Inhaltsverzeichnis Einleitung Nginx-Dockerdatei N...

MySQL-Beispiel zum Abrufen des heutigen und gestrigen Zeitstempels 0:00

Wie unten dargestellt: Gestern: UNIX_TIMESTAMP(CA...

Docker-Grundlagen

Vorwort: Docker ist eine Open-Source-Anwendungsco...

4 Lösungen für CSS-Browserkompatibilitätsprobleme

Frontend ist ein harter Job, nicht nur weil sich ...

HTML-Multimediaanwendung: Einfügen von Flash-Animationen und Musik in Webseiten

1. Anwendung von Multimedia in HTML_Flash-Animati...

Problem mit der Iframe-QRC-Zuweisung (serverseitig)

Ich bin heute auf dieses Problem gestoßen. Ich hab...

Implementierungscode für die teilweise Aktualisierung einer HTML-Seite

Aktualisierung der Ereignisantwort: Aktualisierun...

Die Methode zur Änderung vergessener MySql-Passwörter ist für Versionen ab 5.7 geeignet.

1. Stoppen Sie zuerst den mysqld.exe-Prozess 2. Ö...

Wie überwacht und erhält Zabbix Netzwerkgerätedaten über SSH?

Szenariosimulation: Das Betriebs- und Wartungsper...

So exportieren und importieren Sie SQL-Dateien unter einem Linux-Befehl

Dieser Artikel beschreibt, wie Sie SQL-Dateien mi...

Detailliertes Tutorial zum Bereitstellen einer benutzerdefinierten Apollo-Umgebung mit Docker-Compose

Inhaltsverzeichnis Was ist das Apollo Configurati...

So zeigen Sie im img-Tag in HTML nur die Bildmitte an (drei Methoden)

Derzeit gibt es drei Möglichkeiten, die Mitte ein...

10 Leistungskonfigurationselemente, die nach der Installation von MySQL angepasst werden müssen

In diesem Blog besprechen wir zehn Leistungseinst...

Grundlegendes zur CSS-Eigenschaft „transform-origin“

Vorwort Ich habe vor kurzem eine Feuerwerksanimat...