JS realizes automatic playback of timeline

Recently, I have implemented such an effect: click the play button, the timeline starts playing, click pause, it stops at the current position, and when you click play again, it continues playing from the current position. You can also click the corresponding year to switch to it, and the playback will automatically pause. When you click play again, it will start from the current position.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" type="text/css" href="fonts/iconfont.css" />
  <style scoped>
   ul,
   li,
   html,
   body {
    margin: 0;
    padding: 0;
   }
 
   #timeline {
    list-style: none;
    text-align: center;
    background: url('img/xuanduan.png') 9px top repeat-y;
   }
 
   #timeline li {
    background-image: url('img/tuoyuan1.png');
    background-repeat: no-repeat;
    background-position: 0 15px;
    background-size: 20px 20px;
    padding-left: 30px;
    height: 50px;
    line-height: 50px;
    color: #444;
    width: 70px;
   }
 
   #timeline lip {
    width: 70px;
    cursor: pointer;
    margin: 0;
   }
 
   .biaoqian {
    background: url('img/biaoqian.png') 2px 13px no-repeat;
    ;
    background-size: 60px 24px;
    color: #fff;
   }
 
   #timeline .selected {
    background: url('img/tuoyuan2.png') 0 15px no-repeat;
    background-size: 20px 20px;
   }
 
   .scroll-shell {
    width: 100px;
    height: 96%;
    margin-top: 1.5%;
    margin-left: 20px;
    float: left;
    overflow: hidden;
   }
 
   .scroll {
    width: 118px;
    height: 103%;
    overflow:auto;
    overflow-x:hidden;
   }
  </style>
 </head>
 <body>
  <div class="scroll-shell">
   <ul style="" id="timeline" ref="timeline" @click="timeline($event)" class="scroll">
 
   </ul>
   <i class="iconfont icon-bofang" id="bofangzanting" style="font-size: 38px;position: absolute;left: 25px;top: 91%;"></i>
  </div>
  <script>
   let years = [2016, 2017, 2018, 2019, 2020, 2021, 2022]
   let index = 0
   let timer = null
   //Create the li corresponding to the time axis
   years.map(k => {
    let createLi = document.createElement('li')
    let createP = document.createElement('p')
    createP.innerHTML = k
    createLi.appendChild(createP)
    timeline.appendChild(createLi)
   })
   //The first one is selected by default var lis = document.querySelectorAll('#timeline li')
   lis[0].classList.add('selected')
   var ps = document.querySelectorAll('#timeline lip')
   ps[0].classList.add('biaoqian')
 
   //Click event, click one to switch to the corresponding effect var ulElement = document.querySelector('#timeline')
   ulElement.onclick = function(e) {
    var lis = document.querySelectorAll('#timeline li')
    var ps = document.querySelectorAll('#timeline lip')
    let event = e || window.event
    let target = event.target || event.srcElement
    if (target.tagName == 'P') {  
     classChange(ps, lis, target)
     for (let i = 0; i < lis.length; i++) {
      console.log(lis[i].getAttribute('class'))
      if (lis[i].getAttribute('class') == 'selected') {
       //Remember the index that was clicked at this time, so that you can continue playing when you click the play button index = i
       console.log(index)
       break;
      }
 
     }
    }
   }
   
   // Common part, clear all styles, and then add the corresponding class name to the click function classChange(ps, lis, target) {
    ps.forEach(k => {
     k.classList.remove('biaoqian')
    })
    target.classList.add('biaoqian')
    lis.forEach(v => {
     v.classList.remove('selected')
    })
    target.parentNode.classList.add('selected')
   }
 
   //Play and pause buttons let bofangzanting = document.getElementById('bofangzanting')
   if (bofangzanting) {
    bofangzanting.onclick = () => {
     if (bofangzanting.className.indexOf('bofang') != -1) {
      console.log('Click to play')
      console.log(timer)
      bofangzanting.classList.remove('icon-bofang')
      bofangzanting.classList.add('icon-zanting')
      if (timer == undefined) {
       autoPlay()
      }
     } else {
      console.log('Click to pause')
      bofangzanting.classList.remove('icon-zanting')
      bofangzanting.classList.add('icon-bofang')
      if (timer) {
       timer = clearInterval(timer)
      } else {
       return
      }
     }
    }
   }
 
   //Automatic playback function autoPlay() {
    var lis = document.querySelectorAll('#timeline li')
    var ps = document.querySelectorAll('#timeline lip')
    timer = setInterval(() => {
     console.log('Autoplay!')
     if (index < ps.length - 1) {
       //Execute the next classChange(ps, lis, ps[index + 1])
      index++
     } else {
       // Jump to the beginning index = 0                
      classChange(ps, lis, ps[index])
     }
     console.log(index)
    }, 1000)
   }
  </script>
 </body>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: