无缝滚图的制作

最新推荐文章于 2022-05-15 21:34:54 发布

怪诞星空

最新推荐文章于 2022-05-15 21:34:54 发布

阅读量378

点赞数

本文链接：https://blog.csdn.net/ljxydx/article/details/54347079

版权

这篇主要来讲一下网页中无缝滚图的实现：

1.首先先来看一下滚动效果的实现：在css中设置定位，并设置超出隐藏，在js中用定时器不断改变定位的top值就可以实现滚动的效果；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		*{padding:0;margin:0px;list-style:none;}
			#box{
				width:500px;height:300px;border:1px solid black;margin:200px;position:relative;overflow:hidden;
			}
			#box ul{
				position:absolute;left:0px;top:0px;padding-left:20px;
			}
			#box ul li{height:40px;line-height:40px;}
		</style>
	</head>
	<body>
		<div id="box">
			<ul class="roll">
				<li>额</li>
				<li>额额</li>
				<li>额额额</li>
				<li>额额额额</li>
				<li>额额额额额</li>
				<li>额额额额额额</li>
				<li>额额额额额额额</li>
				<li>额额额额额额额额</li>
				<li>额额额额额额额额额</li>
				<li>额额额额额额额额额额</li>
				<li>额</li>
				<li>额额</li>
				<li>额额额</li>
				<li>额额额额</li>
				<li>额额额额额</li>
				<li>额额额额额额</li>
				<li>额额额额额额额</li>
				<li>额额额额额额额额</li>
				<li>额额额额额额额额额</li>
				<li>额额额额额额额额额额</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		var oBox=document.getElementById('box');
		var oRoll=oBox.getElementsByClassName('roll')[0];
		
		
		function roll(){  //滚动函数
			oRoll.style.top=oRoll.offsetTop-2+'px';  //oRoll的top值减2；
		}
		setInterval(roll,70);
		roll();
	</script>
</html>

2.但按照上面的程序，内容总会滚动完，我们不可能写上无数的内容供其使用，所以在这里要在函数中加入一个判断使内容滚动完时自动回到顶部重新开始：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		*{padding:0;margin:0px;list-style:none;}
			#box{
				width:500px;height:300px;border:1px solid black;margin:200px;position:relative;overflow:hidden;
			}
			#box ul{
				position:absolute;left:0px;top:0px;padding-left:20px;
			}
			#box ul li{height:40px;line-height:40px;}
		</style>
	</head>
	<body>
		<div id="box">
			<ul class="roll">
				<li>额</li>
				<li>额额</li>
				<li>额额额</li>
				<li>额额额额</li>
				<li>额额额额额</li>
				<li>额额额额额额</li>
				<li>额额额额额额额</li>
				<li>额额额额额额额额</li>
				<li>额额额额额额额额额</li>
				<li>额额额额额额额额额额</li>
				<li>额</li>
				<li>额额</li>
				<li>额额额</li>
				<li>额额额额</li>
				<li>额额额额额</li>
				<li>额额额额额额</li>
				<li>额额额额额额额</li>
				<li>额额额额额额额额</li>
				<li>额额额额额额额额额</li>
				<li>额额额额额额额额额额</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		var oBox=document.getElementById('box');
		var oRoll=oBox.getElementsByClassName('roll')[0];
		
		var disTop=oRoll.offsetHeight-oBox.offsetHeight;  //定义差值变量为oRoll的高度减去oBox的值
		function roll(){  //无缝滚动函数开始
			oRoll.style.top=oRoll.offsetTop-2+'px';  //oRoll的top值减2；
			if(oRoll.offsetTop<-disTop){  //这个判断是当oRoll走完后重新拉回头部开始
				oRoll.style.top='0px';  //如果oRoll的top值小于差值时，将oRoll的top变为0px；
			}
			
		}
		setInterval(roll,70);
		roll();
	</script>
</html>

3.最后来说一下图片的无缝滚动的实现：其中的css使用还是一样，但是js中要把图片加长一杯，更好地实现滚动效果的平滑感，另外，在原生js中，动画的实现效果并不好，这个滚动图出现了向左滑动时速度变慢之类的bug：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{padding:0;margin:0;list-style:none;}
			#box{width:740px;height:116px;border:1px solid black;margin:200px;position:relative;overflow:hidden;}
			#box ul{position:absolute;left:0px;top:0px;}
			#box ul li{float:left;width:185px;}
			.direction p{width:100px;height:40px;line-height:40px;text-align:center;margin-left:200px;
						background:blue;float:left;}
		</style>
	</head>
	<body>
		<div id="box">
			<ul>
				<li><img src="img/a1.jpeg"/></li>
				<li><img src="img/a2.jpeg"/></li>
				<li><img src="img/a3.jpeg"/></li>
				<li><img src="img/a4.jpeg"/></li>
			</ul>
		</div>
		<div class="direction">
			<p id="btn1">left</p>
			<p id="btn2">right</p>
		</div>
	</body>
	<script type="text/javascript">
		var oBox=document.getElementById('box');
		var oUl=oBox.getElementsByTagName('ul')[0];  //在oBox中找到下标为0的标签ul来定义一个对象
		var aLi=oUl.getElementsByTagName('li');
		var oBtn1=document.getElementById('btn1');
		var oBtn2=document.getElementById('btn2');
		var speed=-2;  //定义speed的初始值为0
		
		oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;  //将oUl的内容相加得到双倍的内容
		oUl.style.width=aLi[0].offsetWidth*aLi.length+'px'; //将单个li的宽度与aLi的长度相乘得到新的oUl长度
		
		
		function roll(){  //无缝滚动函数
			
			
			if(oUl.offsetLeft<-oUl.offsetWidth/2){  //如果oUl的left值小于-oUl的宽度的一半
				oUl.style.left='0px';				//就把oUl的left值变为0px
			}
			if(oUl.offsetLeft>0){  					//如果oUl的left值大于0
				oUl.style.left=-oUl.offsetWidth/2+'px';
			}		//则oUl的left值变为-oUl宽度的一半
			oUl.style.left=oUl.offsetLeft+speed+'px';
		}
		
		oBtn1.οnclick=function(){  //按下btn1时
			speed=-2;
		}
		oBtn2.οnclick=function(){  //按下btn2时
			speed=2;
		}
		
		setInterval(roll,50);
		roll();
	</script>
</html>