題目1:輪播的實(shí)現(xiàn)原理是怎樣的?如果讓你來實(shí)現(xiàn)揍瑟,你會(huì)抽象出哪些函數(shù)(or接口)供使用萝挤?(比如 play())
-
滾動(dòng)輪播的實(shí)現(xiàn)原理:
設(shè)置所有的圖片無縫隙的放在同一行猜年,并對(duì)每張圖片設(shè)置position:absolute;先再瀏覽器改變left數(shù)值,確定是否可以進(jìn)行滾動(dòng)恩敌,再編寫JS瞬测,在第一張圖片前clone最后一張圖片,在最后一張圖片后clone第一張圖片纠炮,每次移到clone的圖片的時(shí)候進(jìn)行css({left})設(shè)置月趟,讓圖片回到真正想要到的圖片上。設(shè)置一個(gè)變量len,記錄需要顯示的下一張圖片距離當(dāng)前顯示圖片的距離個(gè)數(shù)恢口,然后animate()方法進(jìn)行滑動(dòng)孝宗。 -
漸變輪播:
對(duì)所有的圖片設(shè)置隱藏并設(shè)置position:absolute;然后再瀏覽器修改每個(gè)圖片的display,判斷是否可以滾動(dòng)耕肩,通過fadeIn()和fadeOut()漸變圖片因妇。 -
接口:
前進(jìn)函數(shù)问潭,后退函數(shù)
選擇函數(shù)
自動(dòng)輪播函數(shù)
題目2:實(shí)現(xiàn)視頻中的左右滾動(dòng)無限循環(huán)輪播效果
題目3:實(shí)現(xiàn)一個(gè)漸變輪播效果, 效果范例339
(mission 17)