輪播的實現(xiàn)原理是怎樣的?如果讓你來實現(xiàn)层亿,你會抽象出哪些函數(shù)(or接口)供使用桦卒?(比如 play())
輪播的原理:
無線輪播:將圖片排列到同一行,利用setInterval每隔一段時間將圖片列表利用絕對定位向左移動一位匿又,在圖片列表的最后加上第一張圖片的克隆體方灾,在圖片列表的最前面加上最后一張圖片的克隆體,在播放到最后一張圖片的時候銜接上第一張圖片的克隆體碌更,再繼續(xù)播放時裕偿,利用修改絕對定位的位置规惰,將圖片移動到第一張宗弯,即可呈現(xiàn)出無線輪播的效果,反之同理挨稿。
淡入淡出輪播:
將圖片列表用絕對定位固定在同一個位置(展示框)旭绒;利用setInterval循環(huán)依次將要展示的圖片fadeIn鸟妙,其他的圖片fadeOut,即可呈現(xiàn)出淡入淡出的輪播效果挥吵。
函數(shù)接口舉例:
playNext() 播放下一張
playPre() 播放上一張