简单轮播图

我就是我 2022-10-29 03:13 245阅读 0赞

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

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

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

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

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

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

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

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

然后我们设置超出容器的隐藏掉（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  
我在里面加了一些注释

[20210212171323663.jpg_pic_center]: /images/20221024/6c45d67c4a49457496aaa841753ce399.png