简单轮播图

最新推荐文章于 2021-06-02 16:57:02 发布

shang liu

最新推荐文章于 2021-06-02 16:57:02 发布

阅读量298

点赞数 2

文章标签： js html css3 css html5

本文链接：https://blog.csdn.net/wantshui/article/details/113748076

版权

这篇文章侧重于js方面在轮播时的应用，

这里先交代一下大致的思路：

主要通过对style.left以及对定时器的使用来实现轮播效果

做一个简单的轮播图，我们要解决的主要问题是

如何让图片动起来?
如何让图片的运动跟随着时间?

对于第一个问题，我们主要使用style.left来实现

我们都知道我们所看到的无论是动画片还是电视剧，他们都是由一帧一帧的图片组成的，只不过图片之间衔接的太快，我们肉眼难以观察的到。所以我们可以借鉴这样的思路，不断改变轮播元素的style.left的值，只要改变的时间足够短，就能达到动画的效果。

我们首先将容器里面的轮播元素都水平放置，这里我们是使用style.left以及css布局的一点内容来实现的，达到如下的效果：
在这里插入图片描述

然后我们设置超出容器的隐藏掉（overflow：hidden）

最后我们每间隔一个较短的时间就改变轮播元素style.left的值，即可实现向左移动的效果，但是还要记得把向左移出的元素位置重新排列到末尾，这样才能不断的重复轮播

对于第二个问题：我们主要使用计时器（setIntervar和clearIntervar）来实现

我们主要设置两个计时器：

一个就是前面提到的style.left改变的频率，达到“一帧一帧”的效果

另一个就是每次轮播内容出现在容器框内后，都要停留一段时间，以方便用户获得个好的体验

在上代码之前，我先写一些将会用到的关键字，知道它们的功能，从而更好的理解代码

我们会用到的有：

onload：js事件，当页面加载完毕之后，执行对应的函数

document.getElementsByClassName(“slide”)：获取class=‘slide’的元素

object.style.left: 使对应的元素的距离原本位置向右偏离相应长度

parseFloat(x):对于x从左往右，取出数字，如果遇到非数字则停止

setInterval(founction,n)每过n毫秒，执行一次对应的函数

*clearInterval(founction)*停止执行setlnterval里设置的函数

onblur：当页面获得焦点时执行对应的函数

onfocus：当页面失去焦点时执行对应的函数

onmouseover：当鼠标停止在某个地方时执行xxx

onmouseout：当鼠标离开某个地方时执行xxx

onmousever和onmouseout都是设置在里的HTML标签里面的属性

下面附上一段代码来说明：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style type="text/css">
	#box{
		width:100px;
		height:100px;
		border:1px solid black;
		position:relative;
		overflow:hidden; //超出的隐藏掉
	}
  //三个轮播内容
	#red{
		background-color:red;
		width:100px;
	}
	#green{
		background-color:green;
		width:100px;
	}
	#blue{
		background-color:blue;
		width:100px;
	}
	.slide{
		width:100px;
		height:100px;
		position:absolute;
	}
</style>
<script type="text/javascript">
  //onload作用是当页面加载完成之后，执行相应的代码
	οnlοad=function(){
		var arr = document.getElementsByClassName("slide");
		for(var i=0;i<arr.length;i++){
			arr[i].style.left = i*100+"px";//使轮播内容横向排列，效果见前面的图片
		}
	}
	function LeftMove(){
		var arr = document.getElementsByClassName("slide");//获取三个子div
		for(var i=0;i<arr.length;i++){
			var left = parseFloat(arr[i].style.left);//使用parseFloat获取数字部分
			left-=2;//每一次变动的距离，后面还有每一个变动频率的设定
			var width = 100;//图片的宽度
			if(left<=-width){
				left=(arr.length-1)*width;//当图片完全走出显示框，拼接到末尾
				clearInterval(moveId);//停止moveId，moveId是后面设置的一个事件
			}
			arr[i].style.left = left+"px";//实现距离的变动
		}
	}
	function divInterval(){
		moveId=setInterval(LeftMove,10);
      //设置一个10毫秒定时器，每10毫秒执行一次LeftMove（频率）
	}
	
	
	timeId=setInterval(divInterval,3000);//设置一个3秒的定时器，它的作用是每过三秒，就执行一次divInterval函数，直观效果就是每过三秒就切换一次图片
	
	function stop(){
		clearInterval(timeId);//停止timeId
	}
	function start(){
		clearInterval(timeId);
		timeId=setInterval(divInterval,2000);//再次开始timeId
	}
	
	//页面失去焦点停止
	onblur = function(){
		stop();
	}
	//页面获取焦点时开始
	onfocus = function(){
		start();
	}
</script>
</head>
<body>
	<div id="box" οnmοuseοver="stop()" οnmοuseοut="start()">
      //onmouseover：当鼠标停止在某个地方是执行xxx
      //onmouseout:当鼠标离开某个地方是执行xxx
		<div id="red" class="slide"></div>
		<div id="green" class="slide"></div>
		<div id="blue" class="slide"></div>
	</div>
</body>
</html>

该代码来自于：
https://blog.csdn.net/weixin_43751022/article/details/84330552
我在里面加了一些注释