JS 超简单的无缝滚动案例

【Ceiauq

已于 2022-08-19 11:24:02 修改

阅读量998

点赞数 1

分类专栏： CSS JS 文章标签： css3 html javascript

于 2022-03-27 23:36:56 首次发布

本文链接：https://blog.csdn.net/chaseqrr/article/details/123784574

版权

JS 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

CSS

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>无缝滚动</title>
	</head>
	<style type="text/css">
		.box{
			width: 600px;
			height: 300px;
			margin: 0 auto;
			overflow: hidden;
			position: relative;
			border: 2px solid orange;
		}
		.box-border{
			width: 1800px;
			height: 300px;
			position: absolute;
			box-sizing: border-box;
			display: flex;
		}
		.box-border>div{
			height: 300px;
			width: 300px;
			display: flex;
			background: #34495E;
			color: white;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			border: 1px solid #03A9F4;
		}
	</style>
	<body>
		<div class="box">
			<div class="box-border" id="border">
				<div >1</div>
				<div >2</div>
				<div >3</div>
				<div >4</div>
				<div >1</div>
				<div >2</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		let dom = document.getElementById("border");
		let time = 0;
		setInterval(()=>{
			time--;
			if(time == -1200){
				time = 0
			}
			dom.style.left = time+"px";
		},1)
	</script>
</html>

【Ceiauq

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS 超简单的无缝滚动案例

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>无缝滚动</title> </head> <style type="text/css"> .box{ width: 600px; height: 300px; margin: 0 auto; overflow: hidden; position:.
复制链接

扫一扫

专栏目录