内容来自：颜海镜
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>Document</title> <style> /*global.css*/ .wp{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; } .page{ font-size: 72px; line-height: 320px; text-align: center; } .page1{ background: red; } .page2{ background: yellow; } .page3{ background: maroon; } .page4{ background: green; } /* 箭头 */ /*@-webkit-keyframes start { 0%,30% { opacity: 0.2; -webkit-transform: translate(0,10px); } 60% { opacity: 1; -webkit-transform: translate(0,0); } 100% { opacity: 0.2; -webkit-transform: translate(0, -5px); } } @keyframes start { 0%,30% { opacity: 0.2; transform: translate(0,10px); } 60% { opacity: 1; transform: translate(0,0); } 100% { opacity: 0.2; transform: translate(0, -5px); } }*/ @-webkit-keyframes start{ from{ opacity: 1; } to{ -webkit-transform:translate(-100%); opacity: 0; } } @keyframes start{ from{ opacity: 1; } to{ transform:translateY(-100%); opacity: 0; } } .start{ position: fixed; top: 95%; left: 50%; margin-left: -17px; margin-top: -34px; width: 34px; height: 34px; } .start b{ position: absolute; top: 10px; left: 50%; margin-left: -9px; width: 19px; height: 12px; background: url(img/arrow.png); background-size: 100% 100%; -webkit-animation: start 1.5s ease infinite; animation: start 1.5s ease infinite; } /*fullpage.css*/ .fullPage-wp{ -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .fullPage-wp:after { display: block; content: ' '; height: 0; clear: both; } .fullPage-wp.anim{ -webkit-transition: all 500ms ease-out 0s; transition: all 500ms ease-out 0s; } .fullPage-page{ display: block; overflow: hidden; } .fullPage-dir-h { float: left; } /*this page css*/ [data-dir]{ position: absolute; z-index: 9999; } [data-dir]:nth-child(1){ top: 100px; right: 0; } [data-dir]:nth-child(2){ top: 140px; right: 0; } .indicator{ position: fixed; right: 10px; top: 50%; margin-top: -40px; } .indicator li{ margin-top: 10px; width: 10px; height: 10px; border-radius: 100px; background: rgba(0,0,0,0.5); text-indent: -9999px; list-style: none; } .indicator li.cur{ background: rgba(255,255,255,0.5); } </style> </head> <body> <div class="wp"> <a href="" id="prev" data-dir="movePrev">向前</a> <a href="" id="next" data-dir="moveNext">向后</a> <div class="wp-inner"> <div class="page page1">1</div> <div class="page page2">2</div> <div class="page page3">3</div> <div class="page page4">4</div> </div> <ul class="indicator"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> <span class="start"><b></b></span> <script src="js/zepto.min.js"></script> <script src="js/zepto.fullpage.js"></script> <script> $('.wp-inner').fullpage({ page: '.page', start: 0, duration: 500, drag: false, loop: false, dir: 'v', der:0.1,//当滑动距离大于一个值时，才会引起滑动现象，滑动距离=der*屏幕高度|宽度 change: function (e) { console.log('change', e.next, e.cur); $('.indicator li').removeClass('cur').eq(e.cur).addClass('cur'); }, beforeChange: function (e) { console.log('beforeChange', e.next, e.cur); }, afterChange: function (e) { console.log('afterChange', e.next, e.cur); }, orientationchange: function () {} }); $("#prev,#next").on('click',function(e){ e.preventDefault(); $.fn.fullpage[$(this).data('dir')](true); }); // update:此方法会重新计算和渲染每屏的高度，当你发现如果每屏的高度有问题时，手动调用下此方法就可以了。 // moveTo:切换到指定屏，如果指定的屏数大于屏总数或小于0，都会做修正处理。 // movePrev:向前一屏，是对moveTo的封装。 // moveNext:向后一屏，是对moveTo的封装。 // start:开启切换功能，和stop配合使用。丰富页面功能，比如到了某页需要点击某个元素后才能到下一页的时候 这个就有用了～～ // stop:关闭切换功能，和start配合使用。 // getCurIndex:获取当前位于第几屏的方法。 </script> </body> </html>