轮播图原理

轮播图原理

先准备几张图片，然后每张图片装个div包起来，这时候图片默认是按顺序排成多列的，像这样:

在图片轮播时肯定只显示一列就行了，所以图片盒子的样式都设为display：none，在要轮播的图片盒子样式上加一个多类选择器使它变为block就行。

图片的动画显示是通过css3的transition实现的，

.item {transition: left ${this.speed}ms ease-in-out}

ease-in-out规定以慢速开始和结束的过渡效果，在css3中这个动画触发的条件是类名后加hover，而在js中的触发条件是类名发生改变，像.item.active变为.item.active.left这样。而我们通过点击左右切换的图标来改变图片盒子的类名就可以触发动画效果了。

首先当点图中红色的按钮时，图片向右切换，但是看起来是向右切换，实际上是下一张图片左移进来的

假设我们的第一张显示的图的类名为item active，第二张显示的图的类名为item next当我们点击右边的箭头时，它的类名设为item active left，切进来的第二张图片类名设为item next left，在样式里设置不同类名的left值就能形成第一张图片左移出去，第二张图片左移进来的动画效果。