前言
在實(shí)際的開發(fā)過程中碰到的單頁切屏效果，稍作改動(dòng)，就可以做成如下優(yōu)雅的幻燈片效果了。
原理
文檔結(jié)構(gòu)如下，監(jiān)測(cè)鼠標(biāo)滾輪的滾動(dòng)事件，相應(yīng)的執(zhí)行切屏動(dòng)畫。
實(shí)現(xiàn)過程中的注意事項(xiàng)：
- 鼠標(biāo)滾輪事件的兼容性問題：
W3C并沒有對(duì)鼠標(biāo)滾輪事件進(jìn)行規(guī)范，各瀏覽器廠商封裝了不同的實(shí)現(xiàn)方法，事件屬性也不一樣，F(xiàn)ireFox用了一個(gè)私有實(shí)現(xiàn)DOMMouseScroll。其他瀏覽器都是用mousewheel實(shí)現(xiàn)，所以需要做一下兼容處理（詳見下面的js關(guān)鍵代碼的截圖）
- 切屏幻燈片效果是通過“background-attachment: fixed;”實(shí)現(xiàn)的，如果不想要幻燈片效果，只是單純的切屏，把“background-attachment: fixed;”去掉即可。
代碼
html：
css：
js關(guān)鍵代碼：
滾輪事件：
切屏函數(shù)：
參考
附件
完整代碼見我的github：
https://github.com/pluscai/my-fullpage#my-fullpage
（完）
