一般网页首页轮播图的实现原理

ゞ浴缸里的玫瑰 2022-03-20 07:41 376阅读 0赞

一般的网页首页都会使用轮播图。  
轮播图的运动一般分为两种，一种是一直运动没有时间间隔的，一种就是间隔一段时间运动的。下面向大家介绍一下第二种中间有时间间隔的轮播图实现的原理和一些简单的代码。  
轮播图无限循环运动主要是运动了setInterval计时器和startMove简单的运动的原理。  
下面展示的是4张图片的循环滚动。  
\*\*1.\*\*首先让图片一行显示  
利用浮动将所有所有照片依次排成一行，给这一长串图片添加一个父级的遮罩，每次只显示一张图，其余的都隐藏起来。对图片添加绝对定位，通过控制left属性，实现照片的移动。  
\*\*2.\*\*图片移动的原理  
从a位置移动到b位置，需要先计算两点之间的距离，通过差值和时间间隔，计算出每次移动的步长，通过添加定时器，每次移动相同的步长，实现动画效果。  
\*\*3.\*\*图片移动就是切换图片  
每次图片移动就是减少装着图片容器的宽度，减少该容器的像素值等于图片的宽度时就实现了图片的切换。  
**4**无限自动的原理  
启动一个定时器，每次运动时间间隔设置好时间就实现了无限运动。  
**5**无缝衔接原理  
首先让图片变成之前的两倍。容器也变成之前的两倍。溢出的部分使用overflow：hidden进行隐藏。当图片运动到该容器的一半时，让其图片的位置恢复到最初的位置就实现了无缝衔接。

下面是一些简单的代码。

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		*{
    			margin:0;
    			padding:0;
    		}
    		#div1{
    			width: 320px; height: 320px; position: relative; border:1px solid black; margin:100px auto; overflow: hidden;
    		}
    		#ul1{
    			position: absolute; float:left;
    		}
    		#ul1 li{
    			margin:10px;
    			list-style: none;
    			float:left;
    			width: 300px; 
    			height: 300px;
    		}
    		#ul1 li img{
    			width: 100%;
    			height: 100%;
    		} 
    	</style>
    	<script src= "startMove.js"></script>
    	<script>
    		window.onload = function(){
    			//获取能够用到的节点
    			var oDiv1 = document.getElementById('div1');
    			var oUl = document.getElementById("ul1");
    			var aLis = oUl.getElementsByTagName('li');
    
    			//先让图片的数量变成当前的两倍
    			oUl.innerHTML += oUl.innerHTML;
    			//让Ul的宽也变成当前的两倍
    			oUl.style.width = 320 * aLis.length + 'px';
    			//启动定时器 两秒运动一次
    			setInterval(function(){
    				//每次运动一个图片的距离 
    				startMove(oUl,{left: oUl.offsetLeft - 320},function(){
    						//当图片运动到等于ul宽一般的位置时，让其恢复到开始的位置
    						if(oUl.offsetLeft <= -oUl.offsetWidth / 2){
    							oUl.style.left = "0";
    						}
    					})				
    			},2000)
    		}
    	</script>
    </head>
    <body>
    	<div id = "div1">
    			<ul id = "ul1">
    				<li> <img src="../images/1.jpg" alt=""></li>
    				<li> <img src="../images/2.jpg" alt=""></li>
    				<li> <img src="../images/3.jpg" alt=""></li>
    				<li> <img src="../images/4.jpg" alt=""></li>
    			</ul>
    		</div>
    </body>
    </html>

上面是一些实现的简单代码。