轮播

2017-06-03  本文已影响0人  mianmiani

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

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

无线轮播

无线轮播预览

淡入淡出轮播

淡入淡出轮播预览

上一篇下一篇

猜你喜欢

热点阅读