轮播图在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状态
<li class="item active"></li>
<li class="item next"></li>
记得相对谁定位和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状态
<li class="item next left"></li>
<li class="item active left"></li>
3. 清除移除的active,清除到达的板块并为它添加active
js
setTimeout(function(){
nextElement.removeClass("next left");
actElement.removeClass("active left");
nextElement.addClass("active");
},600)
最后html的状态应该是这样滴
<li class="item"></li>
<li class="item active"></li>
多说一句
其实切换动画可以各种丰富多彩, 了解原理后你也可以上下切换,翻页式切换(旋转+缩放),
淡入淡出切换等等.
[1]: http://v3.bootcss.com/javascript/#carousel
