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:

JS gibt an, dass das Audio zu einem bestimmten Zeitpunkt abgespielt wird

<<: Detaillierte Analyse von MySQL-Deadlock-Problemen

>>: Detaillierte Erläuterung der Nginx-Konfigurationsparameter auf Chinesisch (Lastausgleich und Reverse-Proxy)

Beispiel für CSS3 zum Erzielen eines Div-Ein- und Ausschiebens von unten nach oben

JS realisiert die automatische Wiedergabe der Timeline

Beispiel für CSS3 zum Erzielen eines Div-Ein- und Ausschiebens von unten nach oben

Detaillierte Erklärung der neuen Funktionen von ES9: Asynchrone Iteration

Verwenden Sie crontab, um das Skript zur regelmäßigen Ausführung des JAR-Programms in centOS6 auszuführen

Zwei Möglichkeiten zur Lösung des Problems, dass die MySQL-Master-Slave-Datenbank nicht synchronisiert wird

Mehrere Möglichkeiten für Vue, die Kommunikation zwischen Komponenten zu erreichen (mehrere Szenarien)

Vue erzielt einen nahtlosen Karusselleffekt (Laufschrift)

Grafisches Tutorial zur Installation und Konfiguration der Dekomprimierungsversion von MySQL 8.0.17

So verwenden Sie Nexus, um JAR-Pakete zu privaten Servern hinzuzufügen

Perfekte Lösung für keine rc.local-Datei in Linux

Detaillierte Erläuterung der MySQL-Existes- und Not-Existes-Beispiele

Artikel empfehlen

Detaillierte Erklärung der Rolle statischer Variablen in MySQL

Führt diese SQL-Schreibmethode wirklich dazu, dass der Index fehlschlägt?

So erstellen Sie einen Nginx-Image-Server mit Docker

MySQL Serie 8 MySQL Server-Variablen

Installieren Sie nodejs und yarn und konfigurieren Sie den Taobao-Quellprozessdatensatz

Zusammenfassung der Grundsätze zum Schreiben von HTML-Seiten für E-Mails

Apache Log4j2 meldet eine Sicherheitslücke auf Nuklearebene und eine schnelle Lösung

Mehrere Möglichkeiten zum Sichern einer MySql-Datenbank

CSS-Code-Abkürzung div+css-Layout-Code-Abkürzungsspezifikation

So verwenden Sie VUE, um die Ali Iconfont-Bibliothek online aufzurufen

MySQL-Cursor-Prinzip und Analyse von Anwendungsbeispielen

Vue implementiert Card-Flip-Karussellanzeige

Zusammenfassung der Probleme beim Hinzufügen, Löschen, Ändern und Abfragen von MySQL-Tabellen, -Spalten und -Datenbanken

Gründe und Lösungen für das Fehlschlagen der Erstellung von Fremdschlüsseln durch MySQL

Grafisches Tutorial zum Konfigurieren des Nginx-Dateiservers im Windows 10-System