轮播的实现

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

  • 左右轮播实现原理:
    • 最外层可视窗口设置与图片宽高相等, 并使用overflow: hidden,内部容器高度与图片高度相等, 宽度为所有轮播图片宽度之和, 并使用绝对定位, 以便通过left值控制左右滚动
    • 如果要左右无限滚动, 需要克隆last img放在容器内最前面, 克隆first img放在最后, 这样当轮播到第一张还想向前, 轮播到最后一张还想向后, 先展示克隆的img , 紧接着通过修改css left值立即替换为真正的首尾img, 由于没有使用动画, 且是相同的图片, 所以肉眼看不出变化, 但实际已经从临时展示的克隆img变为原DOM中的img
  • 渐变轮播实现原理:
    • 与左右轮播相仿, 但更简单, 内部img不需要左右水平排列, 只需要全部绝对定位, 叠加在一起, 然后全部display: none;
    • js中需要在加载后, 就立即执行一致轮播函数, 淡入首张img,接下来监听事件, 通过淡出当前图片, 淡入预期图片, 来达到渐变轮播
  • 关于抽象函数or接口:
    抽象出函数or接口, 代码更有条理, 每个函数控制在20行内, 降低单个函数的复杂度, 提高代码复用性; 由不同的函数部件, 协同完成; 降低了bug排查难度和耦合性; 同时也方便后续维护, 修改, 或新增功能
  • 关于轮播可以抽象出的接口如:
    • playNext() 切换到下一张
    • playPre() 切换到上一张
    • setBullet() 设置状态指示符号
    • autoPlay() 自动轮播
    • stopAuto() 停止自动轮播

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

地址

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

地址

推荐阅读更多精彩内容

  • 1: 轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play()) 一种左...
    晓风残月1994阅读 62评论 0 0
  • 题目1: 轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play()) 左...
    yuhuan121阅读 32评论 0 0
  • 轮播的实现 轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play()) ...
    marmot_ning阅读 24评论 0 0
  • 题目1:轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play()) 基本...
    zhouqichao阅读 48评论 0 0
  • 一直不知道 “最”这个字存在的意义 如此频繁的存在 也如此频繁的存在一个相对的环境 相对 带来一种快乐 例如受苦受...
    天籁村阅读 19评论 0 0