                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /FullPage.js全屏滾動插件

代碼一樣怎么就效果不同呢，還有我的那個幻燈片的箭頭沒有，div也要清除浮動

<!DOCTYPE html>

<html>

<title>無標題文檔</title>

<style>

*{margin:0; padding:0;}

body{

?color:#fff;

?}

? ?.slide{

? ?text-align:center;

? ?float:left;

? ?

? ?}

</style>

</head>

<body>

? <div class="section ">

? ? ? <div><h1>這是第一張</h1></div>

? ? ? <div><h1>這是第二張</h1></div>

? ? ? <div><h1>這是第三張</h1></div>

? ? ? <div><h1>這是第四張</h1></div>

? </div>

? <div><h1>這是第二屏</h1></div>

? <div><h1>這是第三屏</h1></div>

? <div><h1>這是第四屏</h1></div>

</div>

</script>

</script>?

?$(document).ready(function(){

?$('#fullpage').fullpage({

? ? ? sectionsColor:['#c7e5de','#feccc5','#a7c7a0','#c7abbf'],

? ??

?});

?});?

?</script>

</body>

</html>

qq_慕UI4158040

2015-10-12

源自：FullPage.js全屏滾動插件 2-1

關注問題我要回答

965

操作

收起

2 回答

釋淨靈_南無阿彌陀佛
2015-12-26

<div?id="fullpage">
??<div?class="section?">
??????<div><h1>這是第一張</h1></div>
??????<div><h1>這是第二張</h1></div>
??????<div><h1>這是第三張</h1></div>
??????<div><h1>這是第四張</h1></div>
??</div>
??<div><h1>這是第二屏</h1></div>
??<div><h1>這是第三屏</h1></div>
??<div><h1>這是第四屏</h1></div>
</div>

看起來,您的slide沒設置這個class="slide"

而且您只有第一屏有下class="section",第二三四屏都沒下,好像不符合fullpage的結構,下面是老師說過的結構喔~給您參考

<div?class="section">這是第一屏</div>
<div?class="section">
????????<div?class="slide">Slide?1</div>
????????<div?class="slide">Slide?2</div>
????????<div?class="slide">Slide?3</div>
????????<div?class="slide">Slide?4</div>
</div>
<div?class="section">這是第三屏</div>
<div?class="section">這是第四屏</div>

0 回復有任何疑惑可以回復我~

收起回答

Y_du
2015-10-12

<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8">
<meta?name="viewport"?content="width=device-width,initial-scale=1,user-scalable=no"/>
<title>無標題文檔</title>
<link?rel="stylesheet"?href="/>
<style>
*{margin:0;?padding:0;}
body{
?color:#fff;

?}

???.slide{
????text-align:center;?
????height:?100px;
???}
</style>
<script?src="http://cdn.staticfile.org/jquery/1.8.3/jquery.min.js">
</script>
<script?src="http://cdn.dowebok.com/77/js/jquery.fullPage.min.js">
</script>?
</head>

<body>
<div?id="dowebok">
????<div>
????????<h3>第一屏</h3>
????</div>
????<div>
????????<h3>第二屏</h3>
????</div>
????<div>
????????<div>第三屏的第一屏</div>
????????<div>第三屏的第二屏</div>
????????<div>第三屏的第三屏</div>
????????<div>第三屏的第四屏</div>
????</div>
????<div>
????????<h3>第四屏</h3>
????</div>
</div>

<script>
?$(document).ready(function(){
????$('#dowebok').fullpage({
??????sectionsColor:['#c7e5de','#feccc5','#a7c7a0','#c7abbf'],?
????});
?});?
?</script>
</body>
</html>

你原來的fullpage的css沒有引入