2018/06

滿屏輪播效果的實(shí)現(xiàn)

發(fā)布時間：2018-06-18 21:52:58

發(fā)布者：chaobai

瀏覽量:

在正向國際項(xiàng)目中，首頁中需要實(shí)現(xiàn)自適應(yīng)屏幕大小滿屏呈現(xiàn)頁面的效果，平時如果實(shí)現(xiàn)橫豎屏都自適應(yīng)的情況會出現(xiàn)很多不確定因素，所以在實(shí)現(xiàn)此效果時我便尋找了實(shí)現(xiàn)滿屏效果的相關(guān)插件，此頁面還有一個不好處理的地方，底部有一個高度很小的地址欄，在滾動鼠標(biāo)滾輪時需要顯示，這里就需要用到fullPage中的fp-auto-height屬性了，自動輪播效果可以搭配Full-Screen-Carousel結(jié)合使用。

1.fullPage

fullPage.js 是一個基于 jQuery 的插件，它能夠很方便、很輕松的制作出全屏網(wǎng)站，主要功能有：支持鼠標(biāo)滾動，支持前進(jìn)后退和鍵盤控制，多個回調(diào)函數(shù)，支持手機(jī)、平板觸摸事件，支持 CSS3 動畫，支持窗口縮放，窗口縮放時自動調(diào)整，可設(shè)置滾動寬度、背景顏色、滾動速度、循環(huán)選項(xiàng)、回調(diào)、文本對齊方式等等，其功能比較豐富。