JS时间轴自动播放

最新推荐文章于 2024-06-23 17:09:38 发布

冷雨温喉

最新推荐文章于 2024-06-23 17:09:38 发布

阅读量2k

点赞数 1

分类专栏： JS

本文链接：https://blog.csdn.net/qq_36652782/article/details/103824501

版权

JS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

最近实现了一个这样的效果，点击播放按钮，时间轴开始播放，点击暂停，停止在当前位置，当再次点击播放的时候，从当前位置开始继续播放，也可以点击相应的年份，切换过去，这时候播放自动暂停，当再次点击播放的时候，从当前位置出发

<!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>

冷雨温喉

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
JS时间轴自动播放

最近实现了一个这样的效果，点击播放按钮，时间轴开始播放，点击暂停，停止在当前位置，当再次点击播放的时候，从当前位置开始继续播放，也可以点击相应的年份，切换过去，这时候播放自动暂停，当再次点击播放的时候，从当前位置出发<!DOCTYPE html><html> <head> <meta charset="utf-8" /> &lt...
复制链接

扫一扫

专栏目录