JS实现时间轴自动播放

编辑: admin 分类: javascript 发布时间: 2022-01-01 来源:互联网

最近实现了一个这样的效果，点击播放按钮，时间轴开始播放，点击暂停，停止在当前位置，当再次点击播放的时候，从当前位置开始继续播放，也可以点击相应的年份，切换过去，这时候播放自动暂停，当再次点击播放的时候，从当前位置出发。

<!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【原URL http://www.yidunidc.com/kt.html 转载请说明出处】;
    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
   //创建时间轴对应的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, 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) {
       //执行下一个
      classChange(ps, lis, ps[index + 1])
      index++
     } else {
       //跳转到开始
      index = 0                
      classChange(ps, lis, ps[index])
     }
     console.log(index)
    }, 1000)
   }
  </script>
 </body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持hwidc。

更多阅读