JSdemo：上下滚动的轮播图封装

最新推荐文章于 2024-09-07 11:08:26 发布

新生代农民工官方认证码农小拽

最新推荐文章于 2024-09-07 11:08:26 发布

阅读量190

点赞数

分类专栏：案例测试

本文链接：https://blog.csdn.net/tuzi007a/article/details/116487288

版权

案例测试专栏收录该内容

12 篇文章 3 订阅

订阅专栏

记录一下，方便后续用。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Demo</title>
	<style>
		* {
			padding: 0;
			margin: 0;
		}
		#box {
			position: relative;
			width: 100px;
			height: 30px;
			overflow: hidden;
		}
		#box ul {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 400%;
		}
		#box ul li {
			width: 100%;
			height: 25%;
			font-size: 20px;
		}
	</style>
</head>
<body>
	<div id="box">
		<ul>
			<li>111</li>
			<li>222</li>
			<li>333</li>
		</ul>
	</div>
	<script>
		const box = document.getElementById('box')
		const ulTips = document.getElementsByTagName('ul')[0]
		let numTips = 0
		let objTips = {
			4: ['444', '999'],
			5: ['555', '1020'],
			29: ['2901', '2902'],
			30: ['3001', '3002']
		}
		ulTips.children[0].innerHTML = objTips[4][0]
		ulTips.children[1].innerHTML = objTips[4][1]
		ulTips.children[2].innerHTML = objTips[5][0]
		const liTipsCopy = ulTips.children[0].cloneNode(true)
		ulTips.appendChild(liTipsCopy)
		console.log('ulTips: ', ulTips.offsetTop, ulTips.children[0].offsetHeight)
		function animate(obj, target, callback) {
			clearInterval(obj.timer)
			function move() {
				var step = (target - obj.offsetTop) / 10;
				step = step > 0 ? Math.ceil(step) : Math.floor(step)
				if(obj.offsetTop == target) {
					clearInterval(obj.timer);
					callback&&callback();
				}
				obj.style.top = obj.offsetTop + step + 'px'
				
			}
			obj.timer = setInterval(move, 40)
		}
		setInterval(() => {
			if(numTips === ulTips.children.length - 1) {
				ulTips.style.top = 0
				numTips = 0
			} else {
				numTips++
			}
			animate(ulTips, -numTips * ulTips.children[0].offsetHeight)
		}, 1500)
	</script>
</body>
</html>