轮播

作者: 饥人谷_星璇 | 来源:发表于2017-11-06 04:06 被阅读0次

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

    • 轮播的实现原理是将所有的轮播图排成一排,然后让这一列的图片使用绝对定位和设置CSS的动画效果的left来进行位移,打到动态切换图片的目的。接着将这一列图片的第一张和最后一张复制然后第一张放到最后,最后一张放到最前,当滚动到这两张图片之时,将动画执行完毕之后再直接回到第一张或者最后一张,这样就可以实现一个左右滚动无限循环的轮播效果。当使用按钮直接切换图片之时,就需要知道需要切换的图片位置与当前图片位置,可以给每一张图片设置一个标记数字,第一张图为0,以此类推,这样的话需要切换到的图片的数字减去当前图片的数字就是需要切换的数字。
    • 接口:
      play(curIndex):切换图片以及设置切换的图片的数量,curIndex为1表示切换到下一张图片,-1表示切换到上一张图片。
      setButton():将当前显示图片代表的按钮特殊显示(比如实心)

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

    实现一个渐变轮播效果

    相关文章

      网友评论

          本文标题:轮播

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