轮播的实现

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

  • 轮播的实现原理:
  1. 先将需要展示的图片及它们的父容器设置为相同的尺寸(等宽等高),并且将超出父容器以外的部分隐藏,这样就可以保证同时只显示其中一张图片;
  2. 对于左右滚动效果的轮播,需要将图片无间距地排成一横排(这里可以使用绝对定位、浮动等方法来实现)。
    当我们点击切换按钮的时候,改变图片整体的left值,实现视觉上向左或向右的滚动;
  3. 对于渐变效果的轮播,需要让图片层层覆盖,并且先展示其中一张,其它的进行隐藏。
    当我们点击切换按钮的时候,让正在被展示的图片消失,同时根据index值,找到对应序号的图片并展示即可。
  • 实现轮播的过程中通常会用到以下几个函数:
    playNext():绑定html中向右的按钮,展示下一张图片;
    playLast():绑定html中向左的按钮,展示上一张图片;
    setBullet():绑定html中用于切换轮播图的若干个导航按钮,直接切换到被点击按钮所对应的图片;
    autoPlay():自动进行轮播;
    stopAuto():停止自动轮播。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1: 轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play()) 一种左...
    晓风残月1994阅读 456评论 0 0
  • 题目1: 轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play()) 原...
    魔王卡卡阅读 173评论 0 0
  • 题目1: 轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play()) 左...
    cctosuper阅读 267评论 0 0
  • 题目1: 轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play()) 左...
    yuhuan121阅读 265评论 0 0
  • 家翁寿晏席正开, 亲朋故友酒杯满, 美味佳肴齐上桌, 客笑主乐笑上传。
    脸上永微笑阅读 266评论 2 6