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

Detaillierte Erläuterung der Konfigurationsmethode des Vue-Anforderungs-Interceptors

Befolgen Sie die nachstehenden Schritte 1. Inhalt...

Das native VIDEO-Tag der HTML-Seite verbirgt die Download-Button-Funktion

Beim Schreiben eines Webprojekts stieß ich auf ei...

Detaillierte Erläuterung der flexiblen Verwendung des CSS-Rastersystems in Projekten

Vorwort CSS-Raster sind normalerweise in verschie...

jQuery implementiert Funktionen zum Reduzieren und Erweitern von Artikeln

Dieses Artikelbeispiel teilt den spezifischen Cod...

Reines CSS, um eine horizontale Linienanimation unter dem Element (Hintergrundbild) zu erreichen

Effektbild: html: <div class='site_bar'...

So verwenden Sie jconsole zum Überwachen von Remote-Tomcat-Diensten

Was ist JConsole JConsole wurde in Java 5 eingefü...

Lösung für die falsche Ausrichtung des Eingabecursors in Chrome, Firefox und IE

Detaillierte Erklärung zur Fehlplatzierung des Ein...

Die Verwendung der Vue-Direktive v-bind und zu beachtende Punkte

Inhaltsverzeichnis 1. v-bind: kann einige Daten a...

Zusammenfassung der MySQL-Abfragesyntax

Vorwort: In diesem Artikel wird hauptsächlich die...

Zusammenfassung der mit dem Abfangen von MySQL-Zeichenfolgen verbundenen Funktionen

In diesem Artikel werden MySQL-Funktionen zum Abf...

Navicat für MySQL-Tutorial

Zuerst müssen Sie Navicat für MySQL herunterladen...

Vue + echart realisiert Doppelsäulendiagramm

In diesem Artikel wird der spezifische Code von v...

So verwenden Sie residente Knoten für die Ebenenverwaltung in CocosCreator

CocosCreator-Version: 2.3.4 Die meisten Spiele ve...

Das obere feste Div kann auf einen halbtransparenten Effekt eingestellt werden

Code kopieren Der Code lautet wie folgt: <!DOC...

Die Idee kombiniert Docker, um Image-Paketierung und Bereitstellung mit einem Klick zu realisieren

1. Docker auf dem Server installieren yum install...