JS realisiert die automatische Wiedergabe der Timeline
|
Vor kurzem habe ich einen solchen Effekt implementiert: Klicken Sie auf die Wiedergabetaste, die Zeitleiste beginnt mit der Wiedergabe. Klicken Sie auf Pause, sie stoppt an der aktuellen Position, und wenn Sie erneut auf Wiedergabe klicken, wird die Wiedergabe an der aktuellen Position fortgesetzt. Sie können auch auf das entsprechende Jahr klicken, um dorthin zu wechseln, und die Wiedergabe wird automatisch angehalten. Wenn Sie erneut auf Wiedergabe klicken, wird sie an der aktuellen Position gestartet.
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8" />
<Titel></Titel>
<link rel="stylesheet" type="text/css" href="fonts/iconfont.css" />
<Stilbereich>
ul,
li,
html,
Körper {
Rand: 0;
Polsterung: 0;
}
#Zeitleiste {
Listenstil: keiner;
Textausrichtung: zentriert;
Hintergrund: URL('img/xuanduan.png') 9px oben wiederholen-y;
}
#Zeitleiste li {
Hintergrundbild: URL('img/tuoyuan1.png');
Hintergrundwiederholung: keine Wiederholung;
Hintergrundposition: 0 15px;
Hintergrundgröße: 20px 20px;
Polsterung links: 30px;
Höhe: 50px;
Zeilenhöhe: 50px;
Farbe: #444;
Breite: 70px;
}
#Zeitleiste Lippe {
Breite: 70px;
Cursor: Zeiger;
Rand: 0;
}
.biaoqian {
Hintergrund: URL('img/biaoqian.png') 2px 13px keine Wiederholung;
;
Hintergrundgröße: 60px 24px;
Farbe: #fff;
}
#Zeitleiste .ausgewählt {
Hintergrund: URL('img/tuoyuan2.png') 0 15px keine Wiederholung;
Hintergrundgröße: 20px 20px;
}
.scroll-shell {
Breite: 100px;
Höhe: 96%;
Marge oben: 1,5 %;
Rand links: 20px;
schweben: links;
Überlauf: versteckt;
}
.scroll {
Breite: 118px;
Höhe: 103%;
Überlauf: automatisch;
Überlauf-x: versteckt;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Scroll-Shell">
<ul style="" id="Zeitleiste" ref="Zeitleiste" @click="Zeitleiste($event)" class="scroll">
</ul>
<i class="iconfont icon-bofang" id="bofangzanting" style="font-size: 38px;position: absolute;left: 25px;top: 91%;"></i>
</div>
<Skript>
lass Jahre = [2016, 2017, 2018, 2019, 2020, 2021, 2022]
lass Index = 0
let timer = null
//Erstelle das li, das der Zeitachse entspricht
Jahre.map(k => {
let createLi = document.createElement('li')
let createP = document.createElement('p')
erstellenP.innerHTML = k
erstelleLi.anhängenKind(erstelleP)
timeline.appendChild(erstelleLi)
})
//Der erste ist standardmäßig ausgewählt var lis = document.querySelectorAll('#timeline li')
lis[0].classList.add('ausgewählt')
var ps = document.querySelectorAll('#Zeitleistenlippe')
ps[0].classList.add('biaoqian')
//Klickereignis. Klicken Sie auf eines, um zum entsprechenden Effekt zu wechseln. var ulElement = document.querySelector('#timeline')
ulElement.onclick = Funktion(e) {
var lis = document.querySelectorAll('#Zeitleiste li')
var ps = document.querySelectorAll('#Zeitleistenlippe')
let event = e || Fenster.Ereignis
let ziel = ereignis.ziel || ereignis.quelle
wenn (ziel.tagName == 'P') {
Klassenänderung(ps, lis, Ziel)
für (lass i = 0; i < lis.length; i++) {
console.log(lis[i].getAttribute('Klasse'))
wenn (lis[i].getAttribute('Klasse') == 'ausgewählt') {
// Merke dir den Index, auf den zu diesem Zeitpunkt geklickt wurde, damit du mit der Wiedergabe fortfahren kannst, wenn du auf die Wiedergabetaste klickst index = i
konsole.log(index)
brechen;
}
}
}
}
// Gemeinsamer Teil, lösche alle Stile und füge dann den entsprechenden Klassennamen zur Klickfunktion classChange(ps, lis, target) { hinzu.
ps.forEach(k => {
k.classList.remove('biaoqian')
})
Ziel.Klassenliste.add('biaoqian')
lis.forEach(v => {
v.classList.remove('ausgewählt')
})
Ziel.parentNode.classList.add('ausgewählt')
}
//Wiedergabe- und Pausentasten let bofangzanting = document.getElementById('bofangzanting')
wenn (bofangzanting) {
bofangzanting.onclick = () => {
wenn (bofangzanting.className.indexOf('bofang') != -1) {
console.log('Zum Abspielen klicken')
console.log(Zeitgeber)
bofangzanting.classList.remove('icon-bofang')
bofangzanting.classList.add('icon-zanting')
wenn (Timer == undefiniert) {
autoPlay()
}
} anders {
console.log('Zum Anhalten klicken')
bofangzanting.classList.remove('icon-zanting')
bofangzanting.classList.add('icon-bofang')
wenn (Zeitgeber) {
Timer = Löschintervall(Timer)
} anders {
zurückkehren
}
}
}
}
//Automatische Wiedergabefunktion autoPlay() {
var lis = document.querySelectorAll('#Zeitleiste li')
var ps = document.querySelectorAll('#Zeitleistenlippe')
Timer = Intervall festlegen(() => {
console.log('Automatisch abspielen!')
wenn (Index < ps.Länge - 1) {
//Führe die nächste Klassenänderung aus (ps, lis, ps[index + 1])
Index++
} anders {
// Zum Anfang springen index = 0
Klassenänderung(ps, lis, ps[index])
}
konsole.log(index)
}, 1000)
}
</Skript>
</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:
|
<<: Detaillierte Analyse von MySQL-Deadlock-Problemen
Artikel empfehlen
JavaScript-Grundlagen: Geltungsbereich
Inhaltsverzeichnis Umfang Globaler Umfang Funktio...
Wählen Sie eine Dropdown-Liste für Webseiten und ein Problem mit der Abdeckung der Div-Ebene aus.
Fragen zu Select-Elementen in HTML wurden an viel...
Verstehen Sie die anfängliche Verwendung von Redux in React in einem Artikel
Redux ist ein Plug-In zur Datenstatusverwaltung. ...
So gestalten Sie die Homepage von Tudou.com
<br />Ich arbeite seit mehreren Jahren im Fr...
Native JavaScript-Karussell-Implementierungsmethode
In diesem Artikel wird die Implementierungsmethod...
So betreten und verlassen Sie den Docker-Container
1 Starten Sie den Docker-Dienst Zuerst müssen Sie...
Detaillierte Erläuterung der Nginx-Protokollanpassung und Aktivierung des Protokollpuffers
Vorwort Wenn Sie die Quelle der Website-Besuche z...
Der Unterschied zwischen MySQL Outer Join und Inner Join Abfrage
Die Syntax für einen äußeren Join lautet wie folg...
XHTML-Erste-Schritte-Tutorial: Verwenden des Frame-Tags
<br />Durch die Frame-Struktur ist die gleic...
Detaillierte Konfigurationsschritte zur Installation von Linux (CentOS) unter einer virtuellen VMware-Maschine
CentOS7 herunterladen Das Image, das ich herunter...
Umfassende Zusammenfassung zu MySQL GTID
Inhaltsverzeichnis 01 Einführung in GTID 02 Wie G...
So schreiben Sie Konfigurationsdateien und verwenden MyBatis einfach
So schreiben Sie Konfigurationsdateien und verwen...
Detaillierte Erläuterung der Überwachung des Jenkins-Prozesses basierend auf Zabbix
1. Überwachungsarchitekturdiagramm 2. Umsetzungsi...
Tutorial-Diagramm zur Installation von TomCat unter Windows 10
Installieren Sie TomCat unter Windows Dieser Arti...
64-Bit-CentOs7-Quellcodeinstallation MySQL-5.6.35 Prozessfreigabe
Installieren Sie zuerst die abhängigen Pakete, um...