温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

JS如何实现时间轴自动播放

发布时间:2021-08-11 14:47:06 来源:亿速云 阅读:242 作者:小新 栏目:开发技术

这篇文章主要为大家展示了“JS如何实现时间轴自动播放”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JS如何实现时间轴自动播放”这篇文章吧。

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

JS如何实现时间轴自动播放

<!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  id="timeline" ref="timeline" @click="timeline($event)" class="scroll">
 
   </ul>
   <i class="iconfont icon-bofang" id="bofangzanting" ></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>

以上是“JS如何实现时间轴自动播放”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI