轮播的实现(17)

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

  • 横向轮播(题目2):

    • 布局:让父容器相对定位,设定宽高为一个图片的宽高,并且overflow:hidden(超出部分不显示);在父容器中设置一个图片容器,高度为图片高,宽度为图片宽*图片个数;在底部设置小圆点,绝对定位居于父容器底部;(横向轮播图组件react代码横向轮播图scss代码
    • 逻辑:一开始将尾图片和首图片clone后,分别放在首尾;增加图片容器的宽度;封装向前/向后翻页的方法(包含动画,动画锁,变化小圆点状态);最后为按钮添加事件(逻辑处理代码
    • 全局变量:curPage(当前第几张图片)和isAnimate(动画加锁)
    • 封装函数:play(n):封装向后n页(n可以是负数),playNext:向后,playPre:向前。
  • 淡入淡出、自动轮播图(题目3)

    • 布局:类似与横向轮播。但是图片是绝对布局,可以互相覆盖。一开始只有第一张图片是显示,其他隐藏。react组件scss样式
  • 逻辑:与横向轮播类似,不需要clone首尾图片、重设宽度,但要设置定时器循环翻页(逻辑处理代码)

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

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

题目3: 实现一个渐变轮播效果, 效果范例25

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 144,105评论 18 619
  • 内容抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条TabLayout图标下拉刷新...
    皇小弟阅读 37,121评论 22 616
  • 原文链接:https://github.com/opendigg/awesome-github-android-u...
    IM魂影阅读 29,186评论 6 465
  • 孔子说“逝者如斯夫,不舍昼夜”,“上善若水”,水是古代文学作品中一个很常见的意象。而我的最爱,除了《诗经》,便数沈...
    拄着双拐的鱼阅读 302评论 0 7
  • 毅行28公里,同学们的友情又加深一步。作为一名八班的学子,看到了自己和同学们两年的变化,非常的开心和感动。毅行路上...
    1408阅读 43评论 0 0