轮播图

1.轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play())

  • 横向轮播:

  • 布局:让父容器相对定位,设定宽高为一个图片的宽高,并且overflow:hidden(超出部分不显示);在父容器中设置一个图片容器,高度为图片高,宽度为图片宽*图片个数;在底部设置小圆点,绝对定位居于父容器底部;

  • 逻辑:一开始将尾图片和首图片clone后,分别放在首尾;增加图片容器的宽度;封装向前/向后翻页的方法(包含动画,动画锁,变化小圆点状态);最后为按钮添加事件(逻辑处理代码

  • 全局变量:curPage(当前第几张图片)和isAnimate(动画加锁)
    封装函数:play(n):封装向后n页(n可以是负数),playNext:向后,playPre:向前。

  • 淡入淡出、自动轮播图

  • 布局:类似与横向轮播。但是图片是绝对布局,可以互相覆盖。一开始只有第一张图片是显示,其他隐藏。

  • 逻辑:与横向轮播类似,不需要clone首尾图片、重设宽度,但要设置定时器循环翻页

  • 全局变量和封装函数:与横向轮播类似,方法play(n)

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

代码
展示

3.实现一个渐变轮播效果, 效果范例

代码
展示

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

推荐阅读更多精彩内容

  • 通过学习,我理解了图片轮播原理,学习了setTimeout()、setInterval()函数设置定时器与清除定时...
    McRay阅读 2,225评论 0 7
  • 本文首发于我的博客,这是我的github,欢迎star。 这是一个轮播图组件,你可以直接下载使用,这里是代码地址,...
    空_城__阅读 1,583评论 2 5
  • 1.背景介绍 轮播图,是由网页banner进化而来,通常放在屏幕最显眼的位置,以大图显示。随着网页中需要推广的信息...
    阿布_0caf阅读 2,008评论 0 6
  • 主要思路 1.我们需要自定义一个继承自FrameLayout的布局,利用FrameLayout布-局的特性(在同一...
    ZebraWei阅读 2,341评论 0 5
  • 不知从何时起,“颜值”成了一个烂大街的词儿。动不动就说某某是颜值担当,多帅、多美。而在我的记忆里,第一个亲眼...
    高枕有忧阅读 486评论 0 0