时间轴在网站建设中经常会用到，例如在企业介绍中可用于企业发展历程、企业的大事记等。如果做进一步应用可以用于事件的办理流程展示等。在日常的应用中都是需要访问者来做点击后才会切换展示的内容，这样在用户的体验度上不友好，能否做到打开页面后时间轴来自动切换内容呢？经过在网上搜索和实践，可以顺利的实现这个效果了。
首先我们来看最终实现的效果图：
接着就是我们的重点部分，代码如下：
<!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>
好了，通过上代码就可以顺利的实现我们今天要为大家介绍的JS实现时间竖轴自动播放的功能了，如果你看了喜欢的话记得收藏哦。
网站