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

一般的网页首页都会使用轮播图。
轮播图的运动一般分为两种,一种是一直运动没有时间间隔的,一种就是间隔一段时间运动的。下面向大家介绍一下第二种中间有时间间隔的轮播图实现的原理和一些简单的代码。
轮播图无限循环运动主要是运动了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>

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

  • 6
    点赞
  • 46
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值