JS realizes automatic playback of timeline
|
Recently, I have implemented such an effect: click the play button, the timeline starts playing, click pause, it stops at the current position, and when you click play again, it continues playing from the current position. You can also click the corresponding year to switch to it, and the playback will automatically pause. When you click play again, it will start from the current position.
<!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 lip {
width: 70px;
cursor: pointer;
margin: 0;
}
.biaoqian {
background: url('img/biaoqian.png') 2px 13px no-repeat;
;
background-size: 60px 24px;
color: #fff;
}
#timeline .selected {
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
//Create the li corresponding to the time axis
years.map(k => {
let createLi = document.createElement('li')
let createP = document.createElement('p')
createP.innerHTML = k
createLi.appendChild(createP)
timeline.appendChild(createLi)
})
//The first one is selected by default var lis = document.querySelectorAll('#timeline li')
lis[0].classList.add('selected')
var ps = document.querySelectorAll('#timeline lip')
ps[0].classList.add('biaoqian')
//Click event, click one to switch to the corresponding effect var ulElement = document.querySelector('#timeline')
ulElement.onclick = function(e) {
var lis = document.querySelectorAll('#timeline li')
var ps = document.querySelectorAll('#timeline lip')
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') == 'selected') {
//Remember the index that was clicked at this time, so that you can continue playing when you click the play button index = i
console.log(index)
break;
}
}
}
}
// Common part, clear all styles, and then add the corresponding class name to the click function classChange(ps, lis, target) {
ps.forEach(k => {
k.classList.remove('biaoqian')
})
target.classList.add('biaoqian')
lis.forEach(v => {
v.classList.remove('selected')
})
target.parentNode.classList.add('selected')
}
//Play and pause buttons let bofangzanting = document.getElementById('bofangzanting')
if (bofangzanting) {
bofangzanting.onclick = () => {
if (bofangzanting.className.indexOf('bofang') != -1) {
console.log('Click to play')
console.log(timer)
bofangzanting.classList.remove('icon-bofang')
bofangzanting.classList.add('icon-zanting')
if (timer == undefined) {
autoPlay()
}
} else {
console.log('Click to pause')
bofangzanting.classList.remove('icon-zanting')
bofangzanting.classList.add('icon-bofang')
if (timer) {
timer = clearInterval(timer)
} else {
return
}
}
}
}
//Automatic playback function autoPlay() {
var lis = document.querySelectorAll('#timeline li')
var ps = document.querySelectorAll('#timeline lip')
timer = setInterval(() => {
console.log('Autoplay!')
if (index < ps.length - 1) {
//Execute the next classChange(ps, lis, ps[index + 1])
index++
} else {
// Jump to the beginning index = 0
classChange(ps, lis, ps[index])
}
console.log(index)
}, 1000)
}
</script>
</body>
</html>The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: In-depth analysis of MySQL deadlock issues
Recommend
How to start multiple MySQL databases on a Linux host
Today, let’s talk about how to start four MySQL d...
VMware implements the detailed process of PXE+kickstart unattended installation of Centos7 system
Table of contents PXE implements unattended batch...
Use CSS and Bootstrap icons to create an up and down jumping indicator arrow animation effect
Sometimes the page is very long and needs an arro...
Getting Started Tutorial for Beginners ⑨: How to Build a Portal Website
Moreover, an article website built with a blog pro...
Install Docker environment in Linux environment (no pitfalls)
Table of contents Installation Prerequisites Step...
This article will show you the basics of JavaScript: deep copy and shallow copy
Table of contents Shallow copy Deep Copy Replenis...
Javascript Basics: Detailed Explanation of Operators and Flow Control
Table of contents 1. Operator 1.1 Arithmetic oper...
Basic application methods of javascript embedded and external links
Table of contents Basic application of javascript...
vue+springboot realizes login function
This article example shares the specific code of ...
Analysis of the implementation process of Nginx high availability solution in production environment
Preparation: 192.168.16.128 192.168.16.129 Two vi...
Vue father-son value transfer, brother value transfer, child-father value transfer detailed explanation
Table of contents 1. Parent component passes valu...
Linux system opens ports 3306, 8080, etc. to the outside world, detailed explanation of firewall settings
Many times, after we install a web service applic...
Detailed explanation of Vue-router nested routing
Table of contents step 1. Configure routing rules...
CSS pixels and solutions to different mobile screen adaptation issues
Pixel Resolution What we usually call monitor res...
CSS screen size adaptive implementation example
To achieve CSS screen size adaptation, we must fi...