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 set PATH environment variable in Linux system (3 methods)
1. In Windows system, many software installations...
WeChat applet development realizes the home page pop-up box activity guidance function
Table of contents 1. Demand 2. Database Design 3....
A brief analysis of Linux network programming functions
Table of contents 1. Create a socket 2. Bind sock...
Example analysis of the page splitting principle of MySQL clustered index
This article uses an example to illustrate the pa...
More Features of the JavaScript Console
Table of contents Overview console.log console.in...
CSS3 implements horizontal centering, vertical centering, horizontal and vertical centering example code
As a front-end monkey, whether it is during an in...
mysql method to view the currently used configuration file my.cnf (recommended)
my.cnf is the configuration file loaded when MySQ...
Make your text dance with the marquee attribute in HTML
Syntax: <marquee> …</marquee> Using th...
A detailed introduction to Tomcat directory structure
Open the decompressed directory of tomcat and you...
Summary of various common join table query examples in MySQL
This article uses examples to describe various co...
In-depth understanding of the specified IE browser rendering method
<meta http-equiv="X-UA-Compatible" c...
Linux kernel device driver advanced character device driver notes
/****************** * Advanced character device d...
Nginx domain name SSL certificate configuration (website http upgraded to https)
Preface HTTP and HTTPS In our daily life, common ...
How to configure domestic sources in CentOS8 yum/dnf
CentOS 8 changed the software package installatio...
Mini Program implements custom multi-level single-select and multiple-select
This article shares the specific code for impleme...