轮播的实现

轮播的实现原理？

以四个图片的轮播为例
html部分：图片存放在ul li标签内，并使用一个div包裹ul
css部分： div设置relative，宽度为单个图片的宽度，并设置overflow: hidden；ul设置absolute定位，宽度在js中设置（因为还需要clone首尾的图片，所以不在CSS中设置宽度）,li全部左浮动
js部分

1. 获取ul节点、获取实际图片的数量imgNum、获取单个图片的宽度imgWidth，定义一个索引curIndex记录当前显示的图片索引
2. clone第一张图片并添加在图片列表的最后，clone最后一张图片并添加到图片列表的最前面，注意：此时显示的是最后一张图片的内容，需将ul向左移动一个图片宽度的距离
3. 获取图片列表的宽度(并将其设置为ul的宽度(4+2张图片))，
4. 定义以下接口：playNext(len)、playPre(len)
5. playNext(): 执行该函数时使用动画将ul向左偏移一个图片(假设len=1)的宽度，动画结束后，将curIndex加1，同时判断curIndex是否为最后一个图片(此时显示的其实是第一个图片)，如果是的，则将ul定位到真正的第一个图片的位置(使用css方法的left进行设置)
6. playPre(): 该函数与playNext移动的方向相反，执行该函数时，使用动画将ul向右偏移一个图片的宽度，动画结束后，将curIndex减1，同时判断curIndex是否为第一个图片(此时显示的其实是最后一个图片)，如果是的，则将ul定位到真正的最后一个图片的位置

轮播的实现需要注意几点：

• 图片需要排列成一排，并通过overflow:hidden只显示出一个图片
• 需要clone首尾图片，并添加到图片列表中，便于过渡，具体可以查看代码
• 轮播就是将图片列表的容器使用动画进行左右移动

实现视频中的左右滚动无限循环轮播效果

代码演示

实现一个渐变轮播效果

原理：

• html与滚动轮播一样，注意css中图片容器宽度设置为图片的宽度，图片全部设置为absolute，同时只将第一个图片显示出来，其余的都设置为display:none
• js部分：使用jquery的fadeOut()函数隐藏当前图片，使用fadeIn()函数显示下一个将要显示的图片，即可完成淡入淡出的效果
  代码演示

滚动轮播和渐变轮播代码

使用CSS 实现

在上面的实现代码中，使用的是绝对定位，调整left的值来进行轮播；另一种方法是使用css3的transform: translateX()来移动图片，通过transition: transform来添加动画效果