carousel 轮播图

轮播图在js中算是一个比较基本的控件,几乎所有的电商或者展示平台都会用得上,所以在此总结了下原理及其实现方法

就以bootstrap中的[Carousel][1]为例

轮播图结构

其实在图片未轮播前,bootstrap的排列是这样滴

pic_1.png

当然,你也可以写点样式让它横着放,这与接下来的原理不相违背
这里,只有active的内容才是dispaly: block,这样多余的板块就不会占据空间

板块切换

板块切换无非是对DOM的添加class和删除class的操作,非常基础
唯一要注意的是左右越界问题 (以下代码仅提供思路)

获取列表: elements = document.querySelector(".carousel > li");
获取边界: maxIndex = elements.lenght;
当前板块: while(all){$(elements[actIndex]).hasClass("active")}
左边越界: prevIndex = actIndex - 1 < 0 ? maxIndex-1 : actIndex -1;
右边越界: nextIndex = (actIndex + 1)%maxIndex;

然后根据actIndex和prevIndex进行class操作

切换动画

这里的动画主要利用了transform进行位移,并用css3的transition过渡动画
代码: transition: transform ease-in 500

以点击右按钮放来说,它实现了这么几步

1. 位置准备

开始动画之前,我们得让即将进场的板块就位

pic_2.png

为了让当前板块就位,我们不得不采取绝对定位的方式让他脱离出来(因为在第一张图中他在下面!)
为即将到来的板块添加next(prev)样式类
css

.item.next
    display: block
    position: absolute
    top: 0
    width: 100%
    transform: translate(100%,0)

js

nextElement.addClass("next")

html状态

记得相对谁定位和overflow:hidden

2. 两个板块一起向左边滑行

为即将到来的板块和当前板块添加left(right)样式类

active板块: 由当前移动到左边(隐藏) (0,0 --> -100%,0)

next板块: 由右边(隐藏)到当前 (100%,0 --> 0,0)

css

.item.next.left   // 100% --> 0
    transform: translate(0,0)

.active.left    // 0 --> -100%
    transform: translate(-100%,0)

js

setTimeout(function(){
    nextElement.addClass("left");
    actElement.addClass("left");
},100)

html状态

3. 清除移除的active,清除到达的板块并为它添加active

js

setTimeout(function(){
    nextElement.removeClass("next left");
    actElement.removeClass("active left");
    nextElement.addClass("active");
},600)

最后html的状态应该是这样滴

多说一句

其实切换动画可以各种丰富多彩, 了解原理后你也可以上下切换,翻页式切换(旋转+缩放),
淡入淡出切换等等.
[1]: http://v3.bootcss.com/javascript/#carousel