这篇文章主要为大家展示了“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如何实现时间轴自动播放”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
