轮播的原理
滑动轮播
1.轮播的图片水平排列
2.给出一个与图片相同大小的视窗包裹图片列,设置overflow: hidden,这样视窗就只能看到一张图片
3.通过position:absolute或者transform来移动整个图片列,实现轮播的基本逻辑;
4.将第一张和最后一张图片克隆分别放到末尾和首部,目的是为了当轮播滚动到最后一张图时,那么它的下一张就会到克隆第一张图,这个时候马上把整个图片列回归到真实的第一张,达到无限循环轮播
5.可以抽离出一些函数分别实现一些按钮功能,如:
function 播放下一张() {
//...
}
function 播放上一张() {
//...
}
再绑定按钮事件,轮播更具交互性
渐变轮播
1.与滑动轮播的布局基本类似,不过这里图片要重叠在一起,可以对单张图片进行position:absolute实现,且display:none
2.渐变轮播的核心是确定渐变离开的图片和渐变进入的图片。
当图片渐变离开时,下一张图片应该渐变进入。
渐变效果可以使用jQuery的fadeIn()和fadeOut()实现
3.与滑动轮播类似,可以抽离出一些函数,实现播放上一张和下一张的功能按钮,让轮播更具交互性
!!下面是两个demo,图片较大,防止bug,图片加载完成前不会进行轮播,耐心等待!!
滑动轮播
https://leeeozhang.github.io/Demos/carousel-slide/
渐变轮播
https://leeeozhang.github.io/Demos/carousel-fade/