題目1: 輪播的實(shí)現(xiàn)原理是怎樣的?如果讓你來(lái)實(shí)現(xiàn),你會(huì)抽象出哪些函數(shù)(or接口)供使用?(比如 play())
1.什么是輪播?
輪播,就是循環(huán)播放一組圖片(或新聞內(nèi)容),一次展示一張,然后無(wú)限循環(huán)。
2.輪播的原理
輪播很簡(jiǎn)單,就是一個(gè)窗口,后面是一組并排(也可以豎排)圖片,圖片和窗口一樣大小,每次移動(dòng)一張圖片,形成輪播。輪播圖的難點(diǎn)在于,到最后一張了怎么移動(dòng)到第一張而具有一樣的滑動(dòng)效果,類似循環(huán),因?yàn)槲覀冎溃贖TML中是不能達(dá)到頭尾相連的。
在這里,主要有兩種思路,一種是調(diào)整DOM順序,即每次在滑動(dòng)前都調(diào)整下圖片的順序,達(dá)到無(wú)限循環(huán)的效果。另一種是老師上課講的那種,到達(dá)最后一張圖片時(shí),在背后加一上第一張圖片,滑動(dòng)到后加的第一張圖片,然后在將圖片組整體移動(dòng)到第一張,開始新一輪的循環(huán)。
第一張思路:
靈魂畫手,見諒見諒
第二種思路:
圖片出自饑人谷
題目2: 實(shí)現(xiàn)視頻中的左右滾動(dòng)無(wú)限循環(huán)輪播效果
在此,我感覺老師的思路簡(jiǎn)單,但是操作起來(lái)比較復(fù)雜,決定采用自己的第一種思路。
效果
demo