轮播图

作者: 小囧兔 | 来源:发表于2017-07-16 22:07 被阅读0次

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

    原理:
    克隆第一张图片插入到最后一张图的后面,克隆最后一张图插入到第一张图的,这样,当滚动到最后一张的时候,显示的是克隆的第一张图片,在没滚完之际快速的切到真实的第一张图片,当在第一张往后滚动的时候,同理,显示的是克隆的最后一张,然后快速的切换到真实的最后一张,这样用户感觉不到,就跟无缝滚动的一样。在显示上,对最外层的容器使用,相对定位,并使它的宽度和轮播图的宽度一样,超出部分隐藏,对于要轮播的图片,使用浮动,使它们水平排列,包裹图片的父容器用绝对定位,然后操作图片便宜的距离,就可以达到滚动的效果。
    抽出的函数:

    1.点击时图片往前滚动
    playNext(){}
    2.点击时图片往后滚动
    playPre(){}
    3.设置轮播图下方的点
    setDot(){}
    4.轮播图无限循环
    autoPlay(){}
    5.轮播
    slider(){}
    

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

    效果预览
    代码
    因为没有阻止a的默认事件,狠狠的坑了自己一个下午!

    实现一个渐变轮播效果

    效果预览
    代码

    相关文章

      网友评论

          本文标题:轮播图

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