轮播

作者: D一梦三四年 | 来源:发表于2017-10-19 12:06 被阅读0次

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

    • 原理:将所有图片摆在一条直线上,用一个与图片大小相等的容器做窗口来显示图片,通过设置图片整体的 left 值来使窗口显示内容发生变化,即图片发生转换。复制第一和最后一张图片放置在这个图片整体的最后和最前,当滚动到这两张复制的图片时,回到原来图片的位置,即可依次轮播。当快速切换图片时,就需要知道当前正在显示图片的在所有图片中的位置,可以设置一个标记位,初始值为0,每次切换时这个标记位的值都要跟着改变。
    • 接口(函数)
    autoPlay()//自动循环播放
    playNext()//切换到下一帧
    playPre()//切换到上一帧
    setBullet()//设置导航按钮切换效果
    

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

    3. 实现一个渐变轮播效果

    相关文章

      网友评论

          本文标题:轮播

          本文链接:https://www.haomeiwen.com/subject/hlyeuxtx.html