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
Detailed explanation of flex and position compatibility mining notes
Today I had some free time to write a website for...
The solution to the page not refreshing after the route changes after react jumps
Table of contents question Solution question Ther...
Analysis of examples of using anti-shake and throttling in Vue components
Be careful when listening for events that are tri...
Compilation process analysis of Remax framework for writing small programs using React (recommended)
Remax is an open source framework developed by An...
js realizes 3D sound effects through audioContext
This article shares the specific code of js to ac...
jQuery achieves the effect of advertisement scrolling up and down
This article shares the specific code of jQuery t...
Determine the direction of mouse entry based on CSS
In a front-end technology group before, a group m...
A detailed analysis of the murder caused by a misplaced double quote in MySQL
1. Introduction Recently, I often encounter devel...
Analysis of centos6 method of deploying kafka project using docker
This article describes how to use docker to deplo...
Sharing of experience on repairing MySQL innodb exceptions
A set of MySQL libraries for testing. The previou...
Solve the problem of running node process in Linux system but unable to kill the process
Let me first introduce to you that the node proce...
Steps to create a Vite project
Table of contents Preface What does yarn create d...
Introduction to the properties of B-Tree
B-tree is a common data structure. Along with him...
Example of using HTML+CSS to implement a secondary menu bar when the mouse is moved
This article introduces an example of using HTML+...
Summary of 7 pitfalls when using react
Table of contents 1. Component bloat 2. Change th...