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

So stellen Sie MySQL 5.7- und 8.0-Master-Slave-Cluster mit Docker bereit

> MySQL 5.7 Cluster Master und Slave bereitste...

Auswahl und Überlegungen zur MySQL-Datensicherungsmethode

Inhaltsverzeichnis 1. rsync, cp Dateien kopieren ...

Richtige Verwendung der Vue-Funktion Anti-Shake und Throttling

Vorwort 1. Entprellen: Nach dem Auslösen eines Ho...

Fallstricke und Lösungen für das Upgrade von MySQL 5.7.23 in CentOS 7

Vorwort Kürzlich bin ich beim Upgrade von MySQL 5...

So ändern Sie das Datenbankdatenspeicherverzeichnis in MySQL

Vorwort Die Standarddatenbankdatei der MySQL-Date...

So stellen Sie Confluence und Jira-Software in Docker bereit

Version: centos==7.2 jdk==1.8 Zusammenfluss == 6....

Verwendung des Vuex-Namespace

Inhaltsverzeichnis Da Vuex einen einzelnen Zustan...

So bereinigen Sie den MySQL-Speicherplatz in der Alibaba Cloud

Heute habe ich von Alibaba Cloud eine Festplatten...

Beispiele zum Hinzufügen, Ändern, Löschen und Löschen von Werten in der MySQL-Datenbank

3. MySQL-Datenverwaltung Die erste Methode: nicht...

Blog-Design Webdesign-Debüt

Die erste Webseite, die ich entworfen habe, sieht...

Installieren Sie mysql5.7 unter Ubuntu 18.04

Ubuntu 18.04 installiert MySQL 5.7 zu Ihrer Infor...

Wo wird der von IntelliJ IDEA mit Tomcat bereitgestellte Projektspeicherort verwendet?

Nachdem IntelliJ IDEA ein Javaweb-Projekt mit Tom...

Sind Sie immer noch Select *?

Es gibt viele Gründe, warum eine Anwendung langsa...

Beispiel für die Verwendung der setInterval-Funktion in React

Dieser Artikel basiert auf der Windows 10-Systemu...

CSS3-Mauszeiger-Übergangszoomeffekt

Das Folgende ist ein Bild-Zoom-Effekt, der in rei...