轮播

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

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

无线轮播

无线轮播预览

淡入淡出轮播

淡入淡出轮播预览

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

推荐阅读更多精彩内容

友情链接更多精彩内容