轮播

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

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

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

实现一个渐变轮播效果

最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 前言 目前市场上的APP中,轮播图可以说是很常见的。一个好的轮播图,基本上适用于所有的APP。是时候打造一个自己的...
    带心情去旅行阅读 17,656评论 15赞 93
  • 第26课ps:轮播插件最后一张图片与第一张图片切换不自然,插件并不完美;代码注重新手推敲过程,非新手可路过。 一些...
    lxf_李晓凤阅读 514评论 0赞 2
  • 1. 轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play()) 实现原...
    billa_8f6b阅读 364评论 0赞 0
  • 题目1: 轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play())滚动...
    好好顽阅读 525评论 0赞 0
  • 1.自己做的奇怪的轮播(自己看完视频直接做的渐变轮播)http://js.jirengu.com/sodeduyi...
    饥人谷_啦啦啦阅读 334评论 0赞 0

友情链接更多精彩内容