用四种方法实现轮播图

1、css3动画实现的轮播图

实现原理如下：

1、设置大的div a)设置绝对定位，定位位置； b)设置图片展示出来的高度和宽度（height和width）； c)设置overflow:hidden;设置超出部分隐藏；使得图片只能在这个框中显示；
2、设置小的div,将所有图片都包起来；宽度是所有图片的宽度；设置position:relative // position:absolute 来让它可以实现轮播的功能；必不可少。（自己的理解，设置大div和小div 的position,来让div浮起来，脱离文档流，就像云一样，可以飘了~）
3、给里面的图片设置float:left;向左浮动，可以让所有图片都在同一行；如果没有float:left；会导致图片轮播的时候出现空白；
4、加入动画；每次都向左偏移一个图片的宽度，即可实现图片轮播；
5、将第一张图片与最后一张图片设置成一样的，是为了实现视觉上的无缝连接；

代码：
在这里插入图片描述

2、bootstrap框架

知识点：（这里只写了一点点，具体的知识点在菜鸟教程里可以看的很清晰哒~ 链接地址：https://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html）

通过data属性：使用data属性可以很容易控制轮播（Carousel）的位置；

属性data-slide 接受关键字prev或next,用来改变幻灯片相对于当前位置的位置。
使用data-slide-to来向轮播传递一个原始滑动索引，data-slide-to="2"将把滑块移动到一个特定的索引，索引从0开始计数。

代码：（直接往里带即可）
在这里插入图片描述

3、用js方法实现（重头戏！！！）

实现原理：

1、自动轮播：

用setInterval(调用的函数，时间)；注意"调用的函数"处要写成函数名，不能带括号，带括号表示立即调用这个函数，不带则表示指向函数的指针。
被调用的函数，我的代码中呢，是xunhuan() ；不断地自加，也就是不断地往后循环，if语句实现的是：当图片到最后一张时，让其跳转到第一张。
调用的change1()函数呢，实际上就是实现轮播的较为核心的部分；先将所有图片，点点的样式设置为一样的，再对当前索引对应的图片，点点设置特别的样式。

2、鼠标移入，移出事件；

接下来的pointlist,以及两个for循环里的事件监听事件，都是为了实现鼠标的移入，移出。
pointlist 点点；imgs 图片； spans 左右按钮。
注意：1）如果你想要通过点击事件来改变图片的移动时，就必须让鼠标移动到上面时设置清除计时器；因为如果不设置的话，当你通过点击事件改变它时，它自身也会自己改变，会出现混乱。2）当清除完后，鼠标移出后需要重新启动计时器，这时候不能再给它设置var
jishi;因为如果再加上var 的话，相当于重新又定义了一个变量，会有好几个计时器同时进行，会越来越快。