題目1: 輪播的實(shí)現(xiàn)原理是怎樣的?如果讓你來實(shí)現(xiàn),你會抽象出哪些函數(shù)(or接口)供使用?(比如 play())
實(shí)現(xiàn)原理
1、 將圖片看成是一個(gè)整體,html里面就是ul,然后將這個(gè)整體設(shè)置為絕對定位,因此只需要變動這個(gè)整體樣式的left,就可展示自己
想要的圖片,當(dāng)然這個(gè)整體的父容器,設(shè)置相對定位,同時(shí)溢出部分隱藏。
2、根據(jù)當(dāng)前這個(gè)整體的offsetLeft值,和點(diǎn)擊按鈕之后,這個(gè)整體的offsetLeft值,找出它們之間存在的關(guān)系,不難發(fā)現(xiàn)和圖片的寬度
有關(guān)。
自動播放時(shí)候的move() 函數(shù)
還有底部按鈕,要先全部樣式為無,之后將當(dāng)前添加樣式。 先全部樣式為無
可以抽象出remove() 函數(shù)。
題目2: 實(shí)現(xiàn)視頻中的左右滾動無限循環(huán)輪播效果
預(yù)覽
題目3: 實(shí)現(xiàn)一個(gè)漸變輪播效果, 效果范例486
預(yù)覽
以上效果代碼