題目1: 輪播的實(shí)現(xiàn)原理是怎樣的?如果讓你來實(shí)現(xiàn)友驮,你會抽象出哪些函數(shù)(or接口)供使用套媚?(比如 play())
輪播實(shí)現(xiàn)的原理:
圖片左浮動,圖片的父元素要絕對定位扮碧,寬度可以通過JS計(jì)算趟章,這樣通過改變圖片父容器left的屬性,可以依次把圖片顯示出來慎王。(注意:要把頭部的圖片復(fù)制到尾部蚓土,把尾部的圖片復(fù)制到頭部,不然會出現(xiàn)空白,當(dāng)刷到最后一張圖片(復(fù)制)時(shí)赖淤,實(shí)際上跳到第一張圖片,同理蜀漆,倒退到第一張圖片(復(fù)制),實(shí)際上跳到最后一張圖片)要注意的點(diǎn)
1.可以設(shè)置一個(gè)全局的變量imgIndex,控制四張圖片的順序
2.要設(shè)置一個(gè)狀態(tài)鎖
3.jq 返回的length 不是動態(tài)的
4.盡量要抽象出可以復(fù)用的函數(shù)
可以抽象的函數(shù): prePlay(),nextPlay() ,play()
題目2: 實(shí)現(xiàn)視頻中的左右滾動無限循環(huán)輪播效果
https://jsxiaocainiao.github.io/demos/%E8%BD%AE%E6%92%AD/%E8%BD%AE%E6%92%AD.html
題目3: 實(shí)現(xiàn)一個(gè)漸變輪播效果, 效果范例441
https://jsxiaocainiao.github.io/demos/%E8%BD%AE%E6%92%AD/%E6%B7%A1%E5%85%A5%E8%BD%AE%E6%92%AD.html