无缝滚动lunbot

最新推荐文章于 2022-05-17 23:06:13 发布

原创最新推荐文章于 2022-05-17 23:06:13 发布 · 353 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#无缝连接轮播图

jquery 专栏收录该内容

16 篇文章

订阅专栏

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style type="text/css">
*{
	margin:0;
	padding:0;
	list-style: none;

}

 

	#box{
		width:600px;
		height:200px;
		border:1px solid #000;
		position:relative;
		left:600px;
		overflow:hidden;
	}
	#subbox{
		width:1600px;
		height:200px;
		position:absolute;
		left:-1000px;
	}
	.img{
		width:200px;
		height:200px;
		line-height:200px;
		float:left;
		text-align: center;

	}
</style>
</head>
<body>
<div id="box">
	<div id="subbox">
		<div class="img">111	</div>
		<div class="img">222	</div>
		<div class="img">333	</div>
		<div class="img">444	</div>
		<div class="img">555	</div>
		<div class="img">666	</div>
		<div class="img">777	</div>
		<div class="img">888	</div>
	</div>
</div>
</body>
</html>
<script type="text/javascript">

window.οnlοad=function(){
 debugger

	//一、得到数据
	//初始subbox的left值
	let currLeft=-1000;
	//left值的增量
	let incLeft=2;

	//二、处理数据
	let myTimer=setInterval(function(){
		debugger
		//1、改变数据
		currLeft=currLeft+incLeft;
		//2、判断边界
		if(currLeft>0){
			currLeft=-1000;
		}
		//3、改变外观
		document.getElementById('subbox').style.left=currLeft+"px";
	},20);
}
</script>