<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,initial-scale=1,user-scalable=no"?/>
????<meta?name="description"?content="通過class做選擇器的!">
????<title>fullpage?的簡單頁面</title>
????<link?>
????<style>
????????body{
????????????color:?#ffffff;
????????????text-align:?center;
????????????font-size:?24px;
????????}
????????.section1{
????????????background-color:?antiquewhite;
????????}
????????.section2{
????????????background-color:gold;
????????}
????????.section3{
????????????background-color:?yellowgreen;
????????}
????????.section4{
????????????background-color:?lightseagreen;
????????}
????</style>
</head>
<body>
????<div?id="fullpage">
????????<div?class="section?section1"><h1>這是第一屏</h1></div>
????????<div?class="section?section2">
????????????<div?class="slide"?data-anchor="slide1">?Slide?1?</div>
????????????<div?class="slide"?data-anchor="slide2">?Slide?2?</div>
????????????<div?class="slide"?data-anchor="slide3">?Slide?3?</div>
????????????<div?class="slide"?data-anchor="slide4">?Slide?4?</div>
????????</div>
????????<div?class="section?section3"><h1>這是第三屏</h1></div>
????????<div?class="section?section4"><h1>這是第四屏</h1></div>
????</div>
</body>
<script?src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script?src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.min.js"?charset="utf-8"></script>
<script?src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/vendors/jquery.easings.min.js"?charset="utf-8"></script>
<script?src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/vendors/jquery.slimscroll.min.js"?charset="utf-8"></script>
<script>
????$(document).ready(function(){
???????$('#fullpage').fullpage({
???????????slideSelector:'.slide',
???????????paddingTop:0,
???????????loopTop:true,
???????????loopBottom:true
?});
????});
</script>
</html>
2015-11-10