JS實現時間軸自動播放

阿新 • • 發佈：2021-08-13

最近實現了一個這樣的效果，點選播放按鈕，時間軸開始播放，點選暫停，停止在當前位置，當再次點選播放的時候，從當前位置開始繼續播放，也可以點選相應的年份，切換過去，這時候播放自動暫停，當再次點選播放的時候，從當前位置出發。

JS實現時間軸自動播放

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" type="text/" 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 li p {
    width: 70px;
    cursor: pointer;
    margin: 0;
   }
 
   .biaoqian {
    background: url('img/biaoqian.png') 2px 13px no-repeat;
    ;
    background-size: 60px 24pxZrhfd 
;
    color: #fff;
   }
 
   #timeline .www.cppcns.comselecteded {
    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;http://www.cppcns.com 
position: absolute;left: 25px;top: 91%;"></i>
  </div>
  <script>
   let years = [2016,2017,2018,2019,2020,2021,2022]
   let index = 0
   let timer=null
   //建立時間軸對應的li
   years.map(k => {
    let createLi = document.createElement('li')
    let createP = document.createElement('p')
    createP.innerHTML = k
    createLi.appendChild(createP)
    timeline.appendChild(createLi)
   })
   //預設選中第一個
   var lis = document.querySelectorAll('#timeline li')
   lis[0].classList.add('selecteded')
   var ps = document.querySelectorAll('#timeline li p')
   ps[0].classList.add('biaoqian')
 
   //點選事件,點選其中一個切換到相應的效果
   var ulElement = document.querySelector('#timeline')
   ulElement.onclick = function(e) {
    var lis = document.querySelectorAll('#timeline li')
    var ps = document.querySelectorAll('#timeline li p')
    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') == 'selecteded') {
       //記住此時被點選的索引,方便點選播放按鈕時繼續播放
       index = i
       console.log(index)
       break;
      }
 
     }
    }
   }
   
   //公共部分,清除掉所有的樣式,再給點選的新增相應的類名
   function classChange(ps,target) {
    ps.forEach(k => {
     k.classList.remove('biaoqian')
    })
    target.classList.add('biaoqian')
    lis.forEach(v => {
     v.classList.remove('selecteded')
    })
    target.parentNode.classList.add('selecteded')
   }
 
   //播放和暫停按鈕
   let bofangzanting = document.getElementById('bofangzanting')
   if (bofangzanting) {
    bofangzanting.onclick = () => {
     if (bofangzanting.className.indexOf('bofang') != -1) {
      console.log('點選播放')
      console.log(timer)
      bofangzanting.classList.remove('icon-bofang')
      bofangzanting.classList.add('icon-zanting')
      if (timer == undefined) {
       autoPlay()
      } 

     } else {
      console.log('點選暫停')
      bofangzanting.classList.remove('icon-zanting')
      bofangzanting.classList.add('icon-bofang')
      if (timer) {
       timer = clearInterval(timer)
      } else {
       return
      }
     }
    }
   }
 
   //自動播放
   function autoPlay() {
    var lis = document.querySelectorAll('#timeline li')
    var ps = document.querySelectorAll('#timeline li p')
    timer = setInterval(() => {
     console.log('自動播放啦！')
     if (index < ps.length - 1) {
       //執行下一個
      classChange(ps,ps[index + 1])
      index++
     } else {
       //跳轉到開始
      index = 0                
      classChange(ps,ps[index])
     }
     console.log(index)
    },1000)
   }
  </script>
 </body>
</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。