JS實現(xiàn)時間軸自動播放

更新時間：2021年08月11日 12:02:15 作者：冷雨溫喉

這篇文章主要為大家詳細介紹了JS實現(xiàn)時間軸自動播放，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

<!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 li p {
    width: 70px;
    cursor: pointer;
    margin: 0;
   }
 
   .biaoqian {
    background: url('img/biaoqian.png') 2px 13px no-repeat;
    ;
    background-size: 60px 24px;
    color: #fff;
   }
 
   #timeline .selecteded {
    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
   //創(chuàng)建時間軸對應的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') {
       //記住此時被點擊的索引,方便點擊播放按鈕時繼續(xù)播放
       index = i
       console.log(index)
       break;
      }
 
     }
    }
   }
   
   //公共部分,清除掉所有的樣式,再給點擊的添加相應的類名
   function classChange(ps, lis, 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) {
       //執(zhí)行下一個
      classChange(ps, lis, ps[index + 1])
      index++
     } else {
       //跳轉到開始
      index = 0                
      classChange(ps, lis, ps[index])
     }
     console.log(index)
    }, 1000)
   }
  </script>
 </body>
</html>

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

您可能感興趣的文章: