題目1: 輪播的實(shí)現(xiàn)原理是怎樣的?如果讓你來實(shí)現(xiàn),你會(huì)抽象出哪些函數(shù)(or接口)供使用入热?(比如 play())
- 布局:讓父容器相對定位婶熬,設(shè)定寬高為一個(gè)圖片的寬高,并且overflow:hidden丛肮;在父容器中設(shè)置一個(gè)圖片容器,高度為圖片高,寬度為圖片寬*圖片個(gè)數(shù)(這一點(diǎn)由js來設(shè)置欧瘪,因?yàn)樗膫€(gè)數(shù)不是一定的);在底部設(shè)置小圓點(diǎn)敦迄,絕對定位居于父容器底部恋追;
- 邏輯:一開始將尾圖片和首圖片clone后凭迹,分別放在首尾;增加圖片容器的寬度苦囱;當(dāng)運(yùn)動(dòng)到clone首圖片時(shí)嗅绸,就立即將其移動(dòng)到真實(shí)首圖片,同理撕彤,當(dāng)運(yùn)動(dòng)到clone尾圖片時(shí)鱼鸠,就立即將其移動(dòng)到真實(shí)尾圖片,形成一個(gè)循環(huán)羹铅。
- 函數(shù)接口:
autoPlay()
playPre()
playNext()