轮播

作者: mianmiani | 来源:发表于2017-06-03 16:34 被阅读0次

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

    轮播的原理:
    无线轮播:将图片排列到同一行,利用setInterval每隔一段时间将图片列表利用绝对定位向左移动一位,在图片列表的最后加上第一张图片的克隆体,在图片列表的最前面加上最后一张图片的克隆体,在播放到最后一张图片的时候衔接上第一张图片的克隆体,再继续播放时,利用修改绝对定位的位置,将图片移动到第一张,即可呈现出无线轮播的效果,反之同理。
    淡入淡出轮播:
    将图片列表用绝对定位固定在同一个位置(展示框);利用setInterval循环依次将要展示的图片fadeIn,其他的图片fadeOut,即可呈现出淡入淡出的轮播效果。
    函数接口举例:
    playNext() 播放下一张
    playPre() 播放上一张

    无线轮播

    无线轮播预览

    淡入淡出轮播

    淡入淡出轮播预览

    相关文章

      网友评论

          本文标题:轮播

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