轮播的实现

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

  • 布局:
    让父容器相对定位,设定宽高为一个图片的宽高,并且设置overflow:hidden溢出隐藏;在父容器中设置一个图片容器,高度为图片高,宽度为图片宽*图片个数(这一点由js来设置,因为它的个数不是一定的);在父容器内部设置多个包含a链接(方便跳转链接)和li元素,给img设置好宽高,li元素左浮,横向排成一排,左右轮播键和底部的圆点都可通过绝对定位确定位置。

  • 实现逻辑:
    通过移动容器的位置来展现不同的图片,达到切换效果。将尾部图片和首部图片clone后,分别放在首尾并相应增加图片容器的宽度;当运动到clone首图片时,立即移动到真实首图片,当运动到clone尾图片时,就立即将其移动到真实尾图片,这样我们的肉眼看上去就是连贯循环的,从而达到无限左右滚动效果。另外当快速切换到不同页面时就需要知道当前正在展现的是哪一页,可以设置一个标记位,初始值为0,每次切换时这个标记位的值都要跟着改变。

  • 函数接口:

autoPlay()//自动循环播放
playNext()//切换到下一张图片
playPre()//切换到上一张图片
setBullet()//底部导航按钮切换效果

实现左右滚动无限循环轮播效果

左右滚动无限循环轮播

实现一个渐变轮播效果

渐变轮播

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

推荐阅读更多精彩内容

  • 轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play()) 实现原理,以...
    _Dot912阅读 295评论 0 3
  • 题目1: 轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play()) 横...
    饥人谷_js_chen阅读 413评论 0 0
  • 轮播的实现原理? 以四个图片的轮播为例html部分:图片存放在ul li标签内,并使用一个div包裹ulcss部分...
    放风筝的小小马阅读 637评论 0 0
  • 轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play()) 轮播的实现原...
    Jeff12138阅读 317评论 0 0
  • 题目1: 轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play()) 左...
    cctosuper阅读 263评论 0 0