題目1: 輪播的實(shí)現(xiàn)原理是怎樣的?如果讓你來實(shí)現(xiàn)套硼,你會(huì)抽象出哪些函數(shù)(or接口)供使用卡辰?(比如 play())
1.什么是輪播?
輪播邪意,就是循環(huán)播放一組圖片(或新聞內(nèi)容)九妈,一次展示一張,然后無限循環(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á)到無限循環(huán)的效果棵癣。另一種是老師上課講的那種,到達(dá)最后一張圖片時(shí)夺衍,在背后加一上第一張圖片狈谊,滑動(dòng)到后加的第一張圖片,然后在將圖片組整體移動(dòng)到第一張沟沙,開始新一輪的循環(huán)河劝。
第一張思路:
第二種思路:
題目2: 實(shí)現(xiàn)視頻中的左右滾動(dòng)無限循環(huán)輪播效果
在此矛紫,我感覺老師的思路簡(jiǎn)單赎瞎,但是操作起來比較復(fù)雜,決定采用自己的第一種思路颊咬。
效果
demo