輪播的實現(xiàn)原理是怎樣的?如果讓你來實現(xiàn),你會抽象出哪些函數(shù)(or接口)供使用?(比如 play())
左右滾動無限循環(huán)輪播的實現(xiàn)
原理:
是將所有圖片的水平排列,但是視口只有一張圖片的寬度,超出范圍的圖片隱藏,切換圖片的時候?qū)嶋H上是包含全部水平圖片的大盒子在移動。
在圖片列表開頭和結(jié)尾分別克隆最后一張圖和第一張圖。圖片的切換,就是改變絕對定位元素的left值。
當(dāng)我們展示到最后一張圖往后點或者第一張圖往前點的時候,會先展示我們之前克隆好的圖,同時把元素回歸到正確的位置。即真正的第一張或者最后一張的位置。

漸變輪播
原理
圖片使用絕對定位顯示在同一個位置上,被輪播的時候設(shè)置為
display`:block`,其他設(shè)置為display:none``利用fadeOut,fadeIn控制當(dāng)前的元素隱藏,下一個元素顯示
重點是對應(yīng)的索引值的變化。