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 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>
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。