轮播

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

  • 布局:让父容器相对定位,设定宽高为一个图片的宽高,并且overflow:hidden;在父容器中设置一个图片容器,高度为图片高,宽度为图片宽*图片个数(这一点由js来设置,因为它的个数不是一定的);在底部设置小圆点,绝对定位居于父容器底部;
  • 逻辑:一开始将尾图片和首图片clone后,分别放在首尾;增加图片容器的宽度;当运动到clone首图片时,就立即将其移动到真实首图片,同理,当运动到clone尾图片时,就立即将其移动到真实尾图片,形成一个循环。
  • 函数接口:
autoPlay()
playPre()
playNext()

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

左右滚动无限循环轮播

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

渐变轮播

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 题目1: 轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play()) 横...
    饥人谷_js_chen阅读 3,056评论 0 0
  • 题目1:轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play()) 布局...
    阿鲁提尔阅读 3,508评论 0 2
  • 轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play()) 实现原理,以...
    _Dot912阅读 2,405评论 0 3
  • 1.轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play()) 横向轮播...
    Rising_suns阅读 3,130评论 0 0
  • 轮播实现的原理 布局: 让父元素相对定位,设定宽高为一个图片的宽度,元素浮动横向排列,并且overflow:hid...
    倾国倾城的小饼干阅读 1,508评论 0 0

友情链接更多精彩内容