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 的话，相当于重新又定义了一个变量，会有好几个计时器同时进行，会越来越快。

3、手动轮播底下小点点的按钮控制

判断点击的是哪个点点，然后将它的索引值赋值给index，再通过调用change1()函数，来实现它的改变。

这里我是通过将点击元素的父元素来和所有的li进行比较，如果一样，则将对应的索引值赋值给index.

4、左右按钮的控制

让它实现自增或自减，然后调用change1()函数来改变样式。其实这里的知识点和自动轮播里的知识点差不多。（从最后一张图片跳转到第一张图片，从第一张跳转到最后一张。）

无论是自动轮播，还是点击控制，都要加入change1() 以及index 来实现对样式的控制，从而实现轮播的效果。

代码：

4、用jQuery实现

（与js用的方法一样，只是语法不同而已，与上面的js方法对比着看，很好理解哒~ 用完jQuery，发现相比于js来说好方便呀~ ，记得用的时候要加上 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> 引用jQuery，否则没有效果的~ ）

代码如下：