轮播

轮播的原理

滑动轮播
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/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容