简单轮播图

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

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

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

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

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

对于第一个问题，我们主要使用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标签里面的属性

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

	

      //onmouseover：当鼠标停止在某个地方是执行xxx
      //onmouseout:当鼠标离开某个地方是执行xxx
		

		

		

	

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